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

 

Metronic Vue and Laravel integration

Create Laravel new project

In the begin to create Laravel+Vue version we need to create new Laravel 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 file

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

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

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