Laravel and Vue.JS Installation

Last Updated: July 20, 2019

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

php composer.phar global require "laravel/installer"

This will download the composer file to install the Laravel project

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

 
php composer.phar create-project --prefer-dist laravel/laravel blog

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

 
cd vuetest
sudo chmod -R 777 storage

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

 
npm run install

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

 php artisan serve

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

<template>

<p> I am at home </p>

</template>

<script>
export default{}
</script>

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

<template>

<p> I am at About </p>

</template>

<script>
export default{}
</script>

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

First install the vue-router

 npm install vue-router

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

routes =[

    {
        path:'/',
        component:Home
    },
    {
        path:'/',
        component:About
    }

]

So your final app.js file have the following code

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';


Vue.use(VueRouter);
window.Vue = require('vue');

const routes =[

    {
        path:'/',
        component:Home,
        name:'home'
    },
    {
        path:'/about',
        component:About,
        name:'about'
    },

]


const router = new VueRouter({
	routes
});


let app= new Vue({
    el:'#app',

    router
})

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

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        
     
    </head>
    <body>
        
                <div id="app">

                <router-link to='/'>Home </router-link>
                <router-link to='/about'>About </router-link>

                <router-view></router-view>

                </div>

          
                <script src="{{ asset('js/app.js') }}" > </script>
    </body>
</html>

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

Now you can run the command

npm run watch

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