Getting started with Laravel and Vue js

PHPZAG Team Laravel, Tutorials

In this Laravel and Vue JS tutorial, We are going to share a very interesting tutorial. Here we will explain How to Get Started with Laravel and Vue js. We will explain step by step to create Laravel App and use Vue Js with it.

Laravel is one of the most popular PHP framework with expressive, elegant syntax. It’s an open-source MVC based platform to develop highly creative web applications. It can also utilizes components and functions of other frameworks for a rapid development.

Laravel can also be combine with Vue Js, a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

You must be wondering why to use Laravel with Vue Js as one is PHP, and the other is Javascript.

With Vue, We do not need to use jquery to manipulate blade templates. Vue already allows for easier managment of DOM using a virtual Dom. Also both Vue and Laravel support single page applications. This allows the application assets get loaded once which typically requires low bandwidth to fulfill.


So now we we will explain how to use Vue in Laravel project.

Create Laravel Project

First we will create Laravel project and run below command to create Laravel proect laravel-vue-app.

composer create-project laravel/laravel laravel-vue-app

Scaffolding Vue.js

Now we wil do scaffolding of our project by installing Laravel and Vue packages.

Install laravel/ui package: We will install Laravel/ui package using below command.

composer require laravel/ui

Install the frontend scaffolding: We will install the frontend scaffolding using the below command. This will also generate auth scaffolding.


php artisan ui vue

Compile scaffolding: We will run below command to compile our fresh scaffolding.

npm install && npm run dev

Configure Blade Templates

Now will configure Blade templates. We will open resources/views/welcome.blade.php and copy paste below code to import app.js and add app id in HTML.

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Laravel Vue App</title>
    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>
    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <div id="app">
        <main class="py-3">
            <h3>Laravel Vue Application</h3>
            <router-view></router-view>
        </main>
    </div>
</body>
</html>

Add Vue components

We will create new file app.vue in resources/js/components and add below code.

<template>
    <div>
        {{message}}
    </div>
</template>
<script>
export default {
    data() {
        return {
            message: 'Hello World'
        }
    }
};
</script>

Setup Vue router

Now we will setup Vue router by using below command.

npm install vue-router --save

We will create a routes folder in resources/js. Then create a home.js file and add the following code.


const home = () =>import ( '../components/app.vue')

export default [
    {
        path: '/home',
        component: home,
        name: 'home',
    },
]

We will create a new file routes.js to the resources/js folder. Then add below code to the newly created routes.js file.

import Vue from 'vue'
import VueRouter from 'vue-router'
import home from './routes/home';

Vue.use(VueRouter);
export default new VueRouter({
    mode: 'history',
    scrollBehavior: (to, from, savedPosition) => ({ y: 0 }), 
    routes: [
        ...home,
    ],
});

Now we will add routes to the resources/js/app.js file. We will replace code with below code in resources/js/app.js file.

require('./bootstrap');
require('../sass/app.scss')
import Vue from 'vue'

window.Vue = require('vue');

// router
import router from './routes.js';
window.router = router;
window.Fire = new Vue();

const app = new Vue({
    el: '#app',
    router,
}).$mount('#app');

Now finally we will setup Laravel project routes. For this we will update routes in routes/web.php file.

Route::get('/{any?}', [
    function () {
        return view('welcome');
    }
])->where('any', '.*');

Run The Application

Now we will run our Laravel application.

We will run application using below command.


php artisan serve

We will compile components using below command.

npm run dev

The application can be accessed on localhost using below.

http://127.0.0.1:8000/