DEV Community

John Wanjema
John Wanjema

Posted on

Getting started with Laravel and Vue js

#laravel #vue #tutorial

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

Top comments (10)

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.

Collapse
 
innovationsusa profile image
innovationsusa •

PHP does a lot of things far better than JS. One of those things is interacting with the database. Another is managing concurrency and load on the server.

JS is good for swishy, swirly effects and asynchronous requests to switch out part of the DOM, but heavy lifting still needs to be done by real, server-side languages.

By the way, you don't need a framework. Vanilla JS is a lot lighter and faster. It's ironic that most "Javascript developers" are terribly unskilled with actual JS.

Collapse
 
beytek profile image
Karim Sabbagh •

dude...

Collapse
 
abdullahbuddy profile image
Abdullah •

Totally amazing. There are a couple more benefits of Laravel and Vue JS which I have covered in a separate article: Laravel and Vue Js. Hopefully the developer community will enjoy my content as well.

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
 
alexgheorghiu profile image
Alex Gheorghiu •

Yes, it's working pretty nice. I used same back-end made in Laravel with web browsers (Vue) and mobiles (Flutter)

Collapse
 
ratcat profile image
RatCat • • Edited

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
 
anchan42 profile image
anchan42 •

Is the command to generate Auth scaffolding correct?

Collapse
 
pabouly profile image
Pierre-Alain Bouly •

Nop it shoud be :
php artisan ui vue --auth

Read next

sanx profile image

Playing with raw image bytes

Sanjay R -

stormsidali2001 profile image

feewrff

Sidali Assoul -

techelopment profile image

Embed HTML Files Without Using Server Side Scripting or JavaScript

Techelopment -

mohsenkamrani profile image

10 First Git Commands You Need to Know

Sam -