How to Setup VueJS in Laravel ? Laravel VueJS Tutorial

In this laravel vuejs tutorial we will see how to setup vuejs project inside laravel and prepare “ready to use” seed project which will use laravel as backend and vuejs as frontend.

I was searching for vuejs integration inside laravel rather than to use it seperately but unable to find one so, i made up this tutorial myself so that users like you can also learn from it.

VueJS comes integrated inside laravel and we just need to hit npm install in order to download all the dependencies and start using it.

But, we will prepare in such a way that it would give us a perfect knowledge and workflow on how the vuejs is working inside laravel.

Before proceeding through the tutorial make sure you have installed node package manger inside your system as well as fresh installation copy of a laravel app.

We are going to make clean copy of an laravel app integrated with vuejs so that we could use across many projects. We need to remove and clean up a lots of things from the fresh copy of laravel app to make a clean build.

Lets get started

Step 1 – Cleaning Up Un-necessary items

Open package.json from your laravel root directory and remove bootstrap-sass, jquery and loadash lines from devDependencies section.
Open app.scss from resources/assets/sass directory and cleanup & remove everything.
Delete _variables.scss file from resources/assets/sass directory.
Delete ExampleComponent.vue from resources/assets/js/components directory.
Open app.js from resources/assets/js and remove all the codes.
Open bootstrap.js from resources/assets/js and remove all the lines above window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';.

We will later create our own files and write our own codes during this tutorial which were removed in the above files.

Step 2 – Installing Vue-Router and devDependencies

We need routing in order to navigate through pages so we will need router in order to do so. vuejs doesnot have router by default, we need to install it by using npm.

Run cmd.exe and hit npm install vue-router --save-dev.

Your package.json file of the project will be updated with vue-router package in devDependencies section.

Now, hit npm install and wait while npm installs all the dependencies in your project. It will take a while to fetch all the dependencies inside the project.

Step 3 – Setting up Single Page and Routes

Now, we need to prepare a single page for our application.

Create new file called index.blade.php inside resources/views which will act as main entry point for our application. Paste these codes below.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="csrf-token" content="{{csrf_token()}}">
    <title>Codeinhouse Vue Laravel App</title>
    <link rel="stylesheet" href="{{url('css')}}/bootstrap.min.css">
    <link rel="stylesheet" href="{{url('css')}}/bootstrap-theme.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="{{url('css')}}/font-awesome.min.css">
    <link rel="stylesheet" href="/css/app.css">

</head>
<body>

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


<script src="{{url('js')}}/jquery-3.2.1.min.js"></script>
<script src="{{url('js')}}/bootstrap.min.js"></script>
<script src="/js/app.js"></script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Codeinhouse Vue Laravel App</title>

</head>

<body>

</body>

</html>

Time to setup routes. Open routes/web.php and paste these codes below :-

Route::get('/', function () {
    return view('index');
});

Route::get('/', function () {

return view('index');

});

Now, open resources/assets/js/bootstrap.js and paste these code below just above the line window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

import Vue from 'vue';
import VueRouter from 'vue-router';
import axios from 'axios';

window.Vue = Vue;
Vue.use(VueRouter);
window.axios = axios;

import Vue from 'vue';

import VueRouter from 'vue-router';

import axios from 'axios';

window.Vue = Vue;

Vue.use(VueRouter);

window.axios = axios;

Open resources/assets/js/app.js and paste these codes inside it.

require('./bootstrap');

import router from './routes';
import App from  './App.vue';

new Vue({
    el: '#app',
    router: router,
    template: '<App/>',
    components: {
        App
    }
});

require('./bootstrap');

import router from './routes';

import App from './App.vue';

new Vue({

el: '#app',

router: router,

components: {

App

}

});

Create new JavaScript file called routes.js inside resources/assets/js and paste these lines below. It will be used for routing for our single page application.

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

let routes = [
    {
        path:"/",
        component:Home
    },
];


export default new VueRouter({
    routes
});

import VueRouter from 'vue-router';

import Home from './components/Home';

let routes = [

{

path:"/",

component:Home

];

export default new VueRouter({

routes

});

Step 4 – Creating Components

We will create the base component as App.vue and inside it we will create sub components which will be easier to manage the components inside components.

Create new component inside resources/assets/js directory named App.vue and paste these lines inside it.

<template>
    <div id="app">
        <cmp-navbar></cmp-navbar>
        <div class="container">
            <router-view />
        </div>
    </div>
</template>

<script>
    import Navbar from './components/partials/Navbar'
    export default {
        name: "app",
        components: {
            'cmp-navbar':Navbar
        }
    }
</script>

<style scoped>

</style>

<cmp-navbar></cmp-navbar>

<router-view />

</div>

</template>

import Navbar from './components/partials/Navbar'

export default {

components: {

'cmp-navbar':Navbar

}

</script>

</style>

Create new directory inside resources/assets/js/components named partials which will include the common things like header,footer,sidebar and navigation.

Lets create one partial component inside partials folder named Navbar.vue and paste these lines of code inside it.

<template>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <router-link to="/" class="navbar-brand">Database Directory</router-link>
            </div>

            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <router-link to="/" activeClass="active" tag="li"><a>Home</a></router-link>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</template>

<script>
    export default {
        name: "cmp-navbar"
    }
</script>

<style scoped>

</style>

<router-link to="/" class="navbar-brand">Database Directory</router-link>

</div>

<router-link to="/" activeClass="active" tag="li"><a>Home</a></router-link>

</ul>

</div>

</div>

</nav>

</template>

export default {

}

</script>

</style>

Now, time to create a home component (main page component). Create new component named Home.vue inside resources/assets/js/components and paste these codes inside it.

<template>
    <div align="center">Welcome to Vue Laravel</div>
</template>

<script>
    export default {
        name: "home"
    }
</script>

<style scoped>

</style>

<div align="center">Welcome to Vue Laravel</div>

</template>

export default {

}

</script>

</style>

Finally, hit npm run watch and php artisan serve from command line to boot-up your laravel vuejs app.

Laravel VueJS Tutorial – How to Set Up VueJS Inside Laravel ?

Step 1 – Cleaning Up Un-necessary items

Step 2 – Installing Vue-Router and devDependencies

Step 3 – Setting up Single Page and Routes

Step 4 – Creating Components

Enjoyed this article?

About SNK

Leave a Reply Cancel reply

Top Categories

Get in Touch

Recent Articles

Step 1 – Cleaning Up Un-necessary items

Step 2 – Installing Vue-Router and devDependencies

Step 3 – Setting up Single Page and Routes

Step 4 – Creating Components

SHARE ON

Enjoyed this article?

About SNK

Leave a Reply Cancel reply

Top Categories

Get in Touch

Recent Articles