Laravel and Vue.JS Installation

We will try to install the Laravel latest version which comes Vue.js

1 First thing you have to install the composer if you already have not installed in your computer

2 Next you can run following command in your terminal

This will download the composer file to install the Laravel project

3 Now you can create the project name Vuetest using the following command

4 Then give write permission to storage and the bootstrap/cache directories

Next you have to run the following command in terminal so that it will install the all the packages listed in the packages.json file

5 Now you can run the following command to run the web server

Now you can open your Laravel home page on this URL http://127.0.0.1:8001

Now we will see how you can build Vue component on top this Laravel project

6 Now we will create the Vue components
I am going to create two components called Home and About

Create Home.vue file at resources>js>component and add the following code

Next you can create the About.vue file at resources>js>component and add the following code

7 Now we will do the router configuration for Vue components to work

First install the vue-router

You can write the router configurations in your app.js file

So your final app.js file have the following code

8 Now you can edit the welcome.blade.php file with the following code

Here you can see the view-router which is used to load the components we created

Now you can run the command

This will compile the all vue code and move to app.js file located at public\js

You can see the output with url URL http://127.0.0.1:8001