How to Install Vue js in Laravel 8 Tutorial

Share this Article
Reading Time: 7 minutes
850 Views

Vue Js is very much compatible with Laravel framework in comparison other javascript frameworks like React, Angular etc. If you are not familiar that how can we work with vue js in laravel 8, this small article will help you.

Vue.js is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications.

Inside this article we will see that How to install Vue Js in Laravel 8. Additionally we will create a vue component and use it with laravel application.

  • Learn Vue js integration in Laravel 8 using Laravel UI package, click here.
  • Complete Laravel 8 Vue JS CRUD Tutorial, Click here.

We will use vue NPM package into laravel 8 application.

x
How to Install Vue js in Laravel 8 Tutorial video

Let’s get started.


Installation of Laravel Application

Laravel Installation can be done in two ways.

  • Laravel Installer
  • By using composer

Laravel Installer

To install Laravel via Laravel installer, we need to install it’s installer first. We need to make use of composer for that.

$ composer global require laravel/installer

This command will install laravel installer at system. This installation is at global scope, so you type command from any directory at terminal. To verify type the given command –

$ laravel

This command will open a command palette of Laravel Installer.

To create ad install laravel project in system,

$ laravel new blog

With the name of blog a laravel project will be created at your specified path.

By using composer

Alternatively, we can also install Laravel by Composer command create-project. If your system doesn’t has Composer Installed, Learn Composer Installation Steps. Here is the complete command to create a laravel project-

$ composer create-project --prefer-dist laravel/laravel blog

After following these steps we can install a Laravel application into system.

To start the development server of Laravel –

$ php artisan serve

This command outputs –

Starting Laravel development server: http://127.0.0.1:8000

Assuming laravel already installed at system.


Installation of vue NPM Package

Open project into terminal and run this npm command to install vue package.

$ npm install vue

It will install vue package and adds a dev dependency.

Open package.json file, look into it. vue should be added into at dependecies.

"dependencies": {
        "vue": "^2.6.12"
 }

Run NPM Installer

$ npm install

It will installs all npm dependencies.


Update ‘webpack’ Mix File

Webpack file is used to compile, bootstrap application and save into /public/js folder i.e app.js. Open webpack.mix.js file from application root. You need to add something here.

Initial code,

//...

mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
]);

Update to,

mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
]);

You will see, we have added .vue() into code.

If you miss to add it, you will get error something like this when you compile your application.

  • Original file linked with Vue js – /resources/js/app.js
  • Compiled file running with application – /public/js/app.js

Create Vue Instance in Laravel

Open app.js file from /resources/js folder.

Add this code into it.

//...

import Vue from 'vue'

// creating a vue instance
const app = new Vue({
    el: '#app'
});

Create First Vue Component in Laravel

There is no specific location to store vue components. So, let’s create components folder inside /resources/js folder.

Create a file AboutComponent.vue inside /resources/js/components folder.

Open AboutComponent.vue and write this complete code into it.

<template>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8">
        <div class="card">
          <div class="card-header page-title">About Us Component</div>

          <div class="card-body body-content">
            Hi, Online Web tutor. I am About Us Page
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log("This is about component");
  },
};
</script>

<style scoped>
.page-title {
  background: gray;
  padding: 10px;
  text-align: center;
  width: 50%;
  color: white;
}
.body-content {
  border: 1px solid;
  width: 50%;
  padding: 9px;
  text-align: center;
}
</style>

Registration of Component to Vue

Open app.js file from /resources/js folder.

We have two methods available by the help of which we can register vue component to app.

Method #1

Add this codes to app.js

//...

Vue.component('about-us', require('./components/AboutComponent.vue').default);

Method #2

Add this codes to app.js

//...

import About from './components/AboutComponent.vue'

//...

const app = new Vue({
    el: '#app',
    components: {
        "about-us": About
    }
});

Now, complete code of app.js file –

require('./bootstrap');

import Vue from 'vue'

// importing compoment
import About from './components/AboutComponent.vue'

// creating a vue instance
const app = new Vue({
    el: '#app',
    components: {
        "about-us": About
    }
});

Create Blade Layout File

Create a file say about-us.blade.php inside /resources/views folder.

open about-us.blade.php and write this complete code into it.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Vue Js Page</title>

        <link rel="stylesheet" href="{{ asset('css/app.css') }}">

    </head>
    <body>

        <div id="app">
            
            <about-us />

        </div>
        
        <script src="{{ asset('js/app.js') }}"></script>
    </body>
</html>
  • id=”app” is added to div. Inside this app vue application will be rendered.
  • asset(‘js/app.js’) Calling compiled app.js file from /public/js folder
  • asset(‘css/app.css’) Calling compiled app.css file from /public/css folder
  • <about-us /> Calling about component into page.

Create Route

Open web.php file from /routes folder.

//...

Route::get('about', function () {
    return view('about-us');
});

Bootstrap & Compile Application

Open project into terminal and run this command.

$ npm run dev

Application will be compiled and save it to app.js of public folder.


Application Testing

Open project to terminal and type the command to start development server

$ php artisan serve

URL – http://127.0.0.1:8000/about

We hope this article helped you to learn How to Install Vue js in Laravel 8 Using Laravel UI Tutorial in a very detailed way.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.

Find More on Laravel 8 Articles here

2 thoughts on “How to Install Vue js in Laravel 8 Tutorial”

Leave a Comment