How to install vue js in laravel 8, Install Vue + laravel 8

10-06-2022 | Share: Whatsapp

How to install vue js in laravel 8.

Install Vue + laravel 8 and how to setup laravel + vuejs application.

Step 1: Create new laravel application

$ composer create-project --prefer-dist laravel/laravel laravelvue "8.*"

once successfully laravel installed, nagivate to its path

Step 2: Install the "laravel/ui" Package

$ composer require laravel/ui

Step 3: Setup the Vue Scaffolding

Install Vue

$ php artisan ui vue

Install Vue with Auth Scaffolding

$ php artisan ui vue --auth

if you run with above command with vue --auth, you will notice that some files and folder has been generated automatically in resources/views folder.

Step 4: Compile the files

$ npm install

$ npm install vue vue-template-compiler vue-loader --save-dev --legacy-peer-deps

Step 5: Include "/js/app.js" in your view

Add this script & link tag in your view.

<link href="{{ asset('css/app.css') }}" rel="stylesheet"/>
<script src="{{ asset('js/app.js') }}"></script>

If you are using scss, or anyother javascript then we require to mix, so at that time use the below tag:

<script src="{{ mix('/js/app.js') }}"></script>

Step 6: Lets serve the application

$ npm run dev

$ php artisan serve

$ npm run watch

You have set vuejs in your laravel application.

If you want to use Vuex, Vue Router, Axios Vue-Axios in your application. Do the following command:

$ npm install vue-router vuex axios vue-axios  --save-dev --legacy-peer-deps

Thanks for reading.