Basic Laravel Vue Js Setup

In this article, we will discuss the “Basic Laravel Vue Js Setup”. By default, Laravel provides the Vue js basic setup files. We just need to set up the node modules. You can change the frontend preset s as per your application requirements. You can read more on presets in the Laravel official documentation. Of course, we will discuss more on those in our future article.

Prerequisites

We need a fresh Laravel setup where we implement our Vue Js. I’m assuming, you are having basic knowledge of Laravel MVC and Laravel Mix. If not, then you can start with the following articles.

• Install Laravel 5 with Xampp using Composer
• Understanding Laravel Middleware
• Basic Use of Model Factories in Laravel
• Laravel Mix a Brief Note

We need Node js and NPM (Node Package Manager). If your system is not ready with Node js and NPM then you need to install. We are working on the window system so we are adding steps for the window. You can download the Node Js from its official site. After a successful installation, you are ready to start with Vue Js tutorials.

You can use the following commands to check the current version of Node js and NPM.

// Node js Version
node -v

// NPM Version
npm -v

Installing Node Modules

You can use the following “npm” command to install the necessary node modules.

npm install

You need to execute the above mention command in the terminal at the root of your Laravel application. All the dependencies are mention in your “package.json”.

In “package.json”, you can add your required NPM module in the “devDependencies”.

After successful installation of node modules, you can see the new directory named “node_modules” at the root of your application. This directory contains all the necessary modules.

Vue Js Folder Structure and Files

In the Laravel app, all the necessary Vue Js component found at the “resources/js/components”.

Let check the ExampleComponent.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card card-default">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

In the “resources/js/app.js” file, we will do the basic logic which is required for our application.

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('example-component', require('./components/ExampleComponent.vue'));

const app = new Vue({
    el: '#app'
});

Blade Template

You can add the required component to your blade template. For example:

@extends('layouts.app')

@section('content')
    <example-component></example-component>
@endsection

In the above code snippet, I extend the “app” layout blade template located at “resources/view/layouts”. You can create your own template as per your requirements.

Compiling the Vue Js Component

You can use the following NPM command to track the changes in your application and compile the components and other required files.

// command
npm run watch

Conclusion

In this article, we will discuss the “Basic Laravel Vue Js Setup”. Hope you increase your knowledge after reading this. Also, we will discuss more on the Laravel and Vue Js in the future. Please feel free to add the comment or add your feedback 🙂

If you like our content, please consider buying us a coffee.
Thank you for your support!
Buy Me a Coffee