Web Prepration

Web Concept Tutorials

Vue

Install Laravel 6 with Vue JS

by Leave a Comment

If you are beginner with Laravel 6 and Vue then I am sure I can help you to install Vue in Laravel 6. It’s very simple way to install using Laravel UI composer package. Laravel ui provide way to install bootstrap, vue and react setup. they also provide auth scaffold for login and register. laravel 6 provide easy way to work with bootstrap, vue and react.

If you want to use Vue Js in application then before install you must need to install Node js and NPM (Node Package Manager). If your system is not ready with Node js and NPM then you need to install. 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.

1
2
3
4
5
6
7
 
// Node js Version
node -v
 
// NPM Version
npm -v
 

The laravel/ui is a separate package that provides the UI scaffoldings for bootstrap, vue and react. Alongside with the auth scaffold for login and registration.

Read Also: How to Integrate Stripe Payment Gateway in Laravel

If you already have a Laravel project setup. then open your terminal and run below command

1
2
3
 
composer require laravel/ui
 

After successfully installation of package, Now we can add Vue in our application

Copy below command and run your terminal

1
2
3
 
php artisan ui vue
 

Installing Node Modules

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

1
2
3
 
npm install
 

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”.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<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.

Read Also: Angular 8 interview questions and answer

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
/**
* 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:

1
2
3
4
5
6
 
@extends('layouts.app')
@section('content')
    <example-component></example-component>
@endsection
 

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.

1
2
3
4
 
// command
npm run watch