DEV Community

John Wanjema
John Wanjema

Posted on

Getting started with Laravel and Vue js

Ever wondered how to setup Vue in your laravel project.

laravel and vue js

Laravel

Laravel is a web application framework with expressive, elegant syntax. We’ve already laid the foundation β€” freeing you to create without sweating the small things.
Here is a link to their Documentation.

Laravel

Vue

Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Here is the link to their documentation.

Vue js

Why use Laravel with Vue

Streamline the Development Process

This structure allows for one to be a full stack developer within a single project

Single-Page Application Development

Both Vue js and Laravel support single page applications.This allows the application assets get loaded once, all that your application does as the user engages with it is request data which typically requires low bandwidth to fulfill.

Building Optimal Complex Front-end Pages

With Vuejs a developer does not need to use jquery to manipulate blade templates.Vue allows for easier managment of DOM using a virtual Dom.

Easy to Learn and Use

Both Laravel and Vue have a robust documentation that is easy to learn and integrate.

First ensure that Laravel is installed.

Here is link to install Laravel if you haven't.

Laravel 8 Installation

Create a laravel project

composer create-project laravel/laravel laravel-vue
Enter fullscreen mode Exit fullscreen mode

Scaffolding Vue js

Install laravel/ui package

composer require laravel/ui
Enter fullscreen mode Exit fullscreen mode

Install the frontend scaffolding using the ui Artisan command

Basic scaffolding

php artisan ui vue
Enter fullscreen mode Exit fullscreen mode

Generate Auth scaffolding.

php artisan ui vue
Enter fullscreen mode Exit fullscreen mode

Compile your fresh scaffolding.

npm install && npm run dev
Enter fullscreen mode Exit fullscreen mode

Configure Blade

Import app.js and add app id

<!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</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</h3>
            <router-view></router-view>
        </main>
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Add Vue components

Add new vue.js file in resources/js/components called app.vue and add the following code.

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

Setup Vue router

Install Vue router

npm install vue-router --save
Enter fullscreen mode Exit fullscreen mode

Create a routes folder and add a home.js file.Add the following code.

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

export default [
    {
        path: '/home',
        component: home,
        name: 'home',
    },
]
Enter fullscreen mode Exit fullscreen mode

Head over to the resources/js folder and create a file called routes.js and add the following code.

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,
    ],
});
Enter fullscreen mode Exit fullscreen mode

Add routes to app.js

Replace the code in your resources/js/app.js with the code below.

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');
Enter fullscreen mode Exit fullscreen mode

Setup Laravel routes

Update Laravel routes in web.php

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

Run the application

Start Laravel app

php artisan serve
Enter fullscreen mode Exit fullscreen mode

Compile components

npm run dev
Enter fullscreen mode Exit fullscreen mode

Access the application at localhost:8000

Open localhost:8000

Link to Github repo.

Github repository

Happy coding

Discussion (4)

Collapse
nanumichael27 profile image
Nanu Oghenetega

What if another application wants to make use of the API? Like a mobile app? Would it work?

Collapse
ratcat profile image
RatCat • Edited on

is it not good to use Laravel for serve API (server side) & use Vue separetly ?

Collapse
tanzimibthesam profile image
Tanzim Ibthesam

Extra cost for both server but if you can its good

Collapse
jamescampbell profile image
JC

This begs the question of why use laravel? Vue is a framework all on its own and it would seem you could just do everything in vue.