Home Metronic Hire Us Buy Now
The World’s #1 Bootstrap 4 & 5 HTML, Angular 11, React, VueJS & Laravel
Admin Dashboard Theme

### Metronic Vue and Laravel integration

#### Create Laravel new project

In the beginning we need to create Laravel+Vue project (in this example, we'll be creating a project named vue_laravel) by running this command:

    composer create-project --prefer-dist laravel/laravel vue_laravel

Navigate to the newly created folder with this command

    cd vue_laravel

#### Install dependencies

Now we need to add all needed dependencies into `package.json`, we can just copy the dependencies from `theme/vue/demo1/package.json` and paste it into the your new vue_laravel `package.json`

Also add devDependencies which existed inside the new vue_laravel package.json

    "cross-env": "^7.0",
    "laravel-mix": "^5.0.1",
    "lodash": "^4.17.19",
    "axios": "^0.19",

When dependencies are added we can install them by running command:

    npm install

#### Prepare resource files

Now we need to copy and paste the images folder from `/theme/vue/demo1/public/media` and paste it into our project's public folder.

Also we need to add all templates and source scss/js files into our laravel project. We can also copy the src folder from `theme/vue/demo1/src` and paste it into our project resources/js folder.

#### Setup project js files

Now we can add into our `resources/js/app.js` file line

    require('./src/main.js');

To enable "@" sign inside the vue paths you should add this code into the `webpack.mix.js`.

    mix.webpackConfig({
        output: {
            chunkFilename: `js/[name].js?id=[chunkhash]`
        },
        resolve: {
            alias: {
                'vue$': 'vue/dist/vue.runtime.esm.js',
                '@': path.resolve(__dirname, 'resources/js/src/')
            }
        }
    });

#### Build files

Now we are ready to build our js file by running this command

    npm run dev

#### Prepare app.blade.php

Now we can add a new file inside resources/views. Let's call it app.blade.php

And add inside app.blade.php file this code

    <!DOCTYPE html>
    <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <meta name="csrf-token" value="{{ csrf_token() }}"/>
       <title>Laravel Vue Example</title>
       <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
       <link href="{{ mix('css/app.css') }}" type="text/css" rel="stylesheet"/>
    </head>
    <body>
       <div id="app">
       </div>
       <script src="{{ mix('js/app.js') }}" type="text/javascript"></script>
    </body>
    </html>

Now we can add new route into file routes/web.php

    Route::get('{any}', function () {
       return view('app');
    })->where('any', '.*');

Now we are ready to run our vue_laravel project by running this command

    php artisan serve