How To Install VueJs In Laravel

Vue.js is an open source JavaScript framework for building UI(user interfaces) and single-page applications.

In this tutorial i will show you how to install vue js in laravel framework, if you are not aware of you are fresher then this post definitely help you to install vuejs in your laravel applications.So let's start and follow below steps for result.

 

Step 1 : Install Laravel

first of all you need to install fresh laravel project(if not exists) in your system to install vuejs, type below command to install laravel

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

 

 Step 2 : Install Laravel/ui

After this we need to install laravel ui in this project so copy below code in your project location and run using composer command.

composer require laravel/ui

 

Step 3 : Install Vue

After installation of above package we can to install vue with our application.

We can install Vuejs two diffrent way, first one is a simple vue setup install and second is install vue with auth. So let's check both way.

 1) Simple setup

php artisan ui vue

2) Install vue with auth for default laravel login and register

php artisan ui vue --auth

Now,We have installed vue, you can see in your resource directory js folder as per bellow screen print.

Step 4 : Install Node

You also need npm for run vuejs,So we need to install NPM to get proper output of vuejs.first of all download npm from below link.

https://www.npmjs.com/get-npm

After installation of NPM we need to check whether it is install or not, So, copy below code and run in your terminal to check.

node -v

 

Step 5 : Install NPM

 As of now we need to install npm in our project so copy code and paste in your terminal.

npm install

 

Step 6 : Run NPM

Now Run npm in your system with below code.

npm run dev

 that's it now you are able to run vue js in your laravel application.

I have added 2 screen shot of form output before install npm view and after install npm view

Before Install NPM

After Install NPM