How to Install laravel-Vue

Laravel-Vue is a popular full-stack web development framework that combines Laravel, a PHP-based backend framework, with Vue.js, a popular front-end JavaScript library. This combination provides developers with a powerful toolset for building scalable and robust web applications.

Laravel provides a robust set of features for building backend applications, including authentication, routing, database migrations, and more. Vue.js, on the other hand, provides developers with a powerful set of tools for building responsive and dynamic user interfaces. When combined, these two frameworks can provide a powerful platform for building modern web applications.

Installing Laravel-Vue

run the following commands:

1.First, create a laravel project
command: composer create-project laravel/laravel:^9.0 laravel-vue

Note: “^9.0” stands for that version, you can also try the command below to install the latest version,

command: composer create-project laravel/laravel laravel-vue

and “laravel-vue” stands for the project folder name.

2. Next, command: cd laravel-vue

3. Install laravel-ui package

command: composer require laravel/ui

4. Install the frond-end scaffolding using artisan command

command: php artisan ui vue

Note: Before proceeding to step 5, make sure to add.vue() to the webpack.mix file, which can be found inside your Laravel project.

This is what should occur under the file webpack.mix:

const mix = require('laravel-mix');

 | Mix Asset Management
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.

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

Note: by adding .vue() on webpack.mix is to avoid error about “ERROR in ./resources/js/components/ExampleComponent.vue 1:0
Module parse failed: Unexpected token (1:0)”

5. Install vue3 and Compile your Fresh Scaffolding

command: npm install && nmp run dev

6. Update the vue-loader

command: npm update vue-loader

We need to update the vue-loader to avoid this error “[webpack-cli] Error: Cannot find module ‘webpack/lib/rules/DescriptionDataMatcherRulePlugin’
Require stack:” while running the command the npm run watch

7. install vue-router

command: npm install vue-router

Note: vue-router is need for routing the intergated laravel-vue modules/webpages

You can installed other dependecies your need on vue3

8. Add a vue component, such as Home.vue, to the resources/js/components folder. Add the following code to Home.vue.


Hello World Happy Installation of Laravel9-Vue3



export default {

    mounted() {
  document.title = "Home";


9. Under the app.js on resources/js replace the code by this:


import { createApp } from 'vue'
import Home from './components/Home.vue'
import routes from './routes.js'

const app = createApp({})

app.component('home', Home)


10. Make a file under the resources/js with the name of routes.js and add this code:

import {createWebHistory, createRouter } from 'vue-router';
import Home from './components/Home.vue';

const routes = [

    path: '/',
    name: 'home',
    component: Home


const router = createRouter({
    history: createWebHistory(),

11 .Next, make a blade file under the resources/views with the name of file home.blade.php and add this code:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <div id="app">

    <script src="{{ mix('js/app.js') }}"></script>

12. Under routes folder, replace the code Route::get of routing on web.php

From this,

Route::get('/', function () {
    return view('welcome');

to this,

Route::get('/{any?}', [
    function () {
    return view('home');}

13. command: php artisan serve

14. command: npm run watch

Note: npm run watch is need to automatically compile all the changes on your Vue components and assets during development.

Overall, the installation of Laravel-Vue involves setting up two powerful frameworks, Laravel and Vue.js, to work together. Laravel provides a robust backend framework for building web applications, while Vue.js offers an efficient and effective way to build the front-end of the application. The two frameworks work together to create a full-stack web development environment that is well-suited for building modern and complex web applications.

Leave a Comment

Your email address will not be published. Required fields are marked *