How to install VueJS in Laravel

How to install VueJS in Laravel

Create the  Laravel project via composer

write command in your terminal to install laravel project:
 composer create-project laravel/laravel NameOfProject 

After installing the project, cd to the project folder and type following command in your terminal for install node modules:
 npm install 

Configure Database for Laravel project
Now time to setup database in phpmyadmin and configure for laravel. just create new database with any name and put same name in project's .env file. you need to configure host, password with database. 

for mac:
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=DBName
DB_USERNAME=root
DB_PASSWORD=root 

for Window:
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=DBName
DB_USERNAME=root
DB_PASSWORD=**blank**

After configured, run following command in your terminal:
php artisan migrate

Understand the working of Vuejs & its components
VueJs working with components. this is most powerful  feature of vuejs. its help you create user interface and works like laravel blade files. it will implement into laravel blade with only with ID name. you just need to put id to any div to display vuejs output.

just open your laravel project and go to resources >> assets >> js >> components, you will see the Example.vue component. vuejs components works with help of one more js file "app.js". This file will be compiled by Laravel-Mix. 

What is Laravel Mix
Laravel Mix is a tool for compiling and optimizing assets in a Laravel. 
Now just want to check now example.vue registered to app.js. just open app.js file code will be like: 

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example-component', 
  require('./components/Example.vue'));

const app = new Vue({
    el: '#app'
});

Create your own component 
you can create your own custom component or you can edit example component too. imagine you created new component name with Diamond.vue. then you need to register your vue component to app.js same like default example component.

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example-component', 
  require('./components/Diamond.vue'));

const app = new Vue({
    el: '#app'
});

Video tutorial: