How to Install Vue js in Laravel 8 Tutorial

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.

We will use vue NPM package into laravel 8 application.

Let’s get started.

Table of Contents

• Installation of Laravel 8 Application
• Installation of vue NPM Package
• Update ‘webpack’ Mix File
• Create Vue Instance in Laravel
• Create First Vue Component in Laravel
• Registration of Component to Vue
• Create Blade Layout File
• Create Route
• Bootstrap & Compile Application
• Application Testing

By using composer

Alternatively, we can also install Laravel by Composer command create-project. If your system doesn’t has Composer Installed, Click here to Install Composer ? 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 8 application into 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.

Original file linked with Vue js — /resources/js/app.js

Compiled file running with application — /public/js/app.js

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.

Read More[…]