How to Add Vue js 3 to Laravel 10 with Vite

1 year ago admin Laravel

In today's lesson, we are going to see how to add Vue js 3 to Laravel 10 with Vite, since version 9.19 Laravel has moved from Webpack to Vite which becomes the default frontend asset bundler for Laravel applications.


Add Vue js 3 and vitejs/plugin-vue plugin to our project

First of all, I assume that you have already installed a fresh Laravel application, next we will add Vue 3 and vitejs/plugin-vue plugin to our project.

                                                        
                                                                                                                        
                                                    
npm install vue@next vue-loader@next
npm i @vitejs/plugin-vue              

Update the file vite.config.js

Next, we will update the file vite.config.js, we will add Vue to the plugins array.

                                                            
                                                                                                                                
                                                                                                                                                                              import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';


export default defineConfig({
    plugins: [
        vue(),
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
});
                                                                                                         

Create the home component

Inside the js folder let's create a new file 'Home.vue', and add the code below.

                                                            
                                                                                                                                
                                                        
<template>
    How to Add Vue js 3 to Laravel 10 with Vite
</template>
                                                        
                                                    

Update the file app.js

Next, update the file app.js, let's import the home component and add it to the app.

                                                            
                                                                                                                                
import {createApp} from 'vue/dist/vue.esm-bundler.js';
import Home from './Home.vue';


const app = createApp({});

app.component('home-component', Home);

app.mount("#app");
                                                        
                                                    

Update the welcome page

Next, update the file welcome.blade.php, we add the link to the app.js file and use the home component.

Now you can run php artisan serve and npm run dev and everything will work fine you will see the content of the home component on the welcome page.

Demo

                                                            
                                                                                                                                
                                                        
                                                                                                                        <!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">

        <!-- Styles -->
        <style>
            body {
                font-family: 'Nunito', sans-serif;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <home-component></home-component>
        </div>
        @vite('resources/js/app.js')
    </body>
</html>
                                                        
                                                    

Popular Tutorials

Related Tutorials

How to Override Laravel Fortify Default Registration Redirect

In this lesson, we will see how to override Laravel Fortify default registration redirect, sometimes...


How to Override Laravel Fortify Default Login Redirect

In this lesson, we will see how to override Laravel Fortify default login redirect, sometimes when w...


How to Use the Same Validation Form Request for both Create and Update in Laravel

In this lesson, we will see how to use the same validation form request for both create and update i...


How to Get Raw SQL Output from the Eloquent Model in Laravel 11

In this lesson, we will see how to get raw SQL output from the eloquent model in Laravel 11, sometim...


How to Check if a Record Does Not Exist in Laravel

in this lesson, we will see how to check if a record does not exist in laravel, sometimes you need t...


How to Check if a Record Exists in Laravel

in this lesson, we will see how to check if a record exists in laravel, sometimes you need to check...


How to Decrement Multiple Fields in Laravel

In this lesson, we will see how to decrement multiple fields in Laravel, in the old versions of lara...


How to Increment Multiple Fields in Laravel

In this lesson, we will see how to increment multiple fields in Laravel, in the old versions of lara...


How to Use the Same Request Validation Rules for Storing and Updating in Laravel

In this lesson, we will see how to use the same request validation rules for storing and updating in...


How to Go Back to the Previous URL in Laravel Blade

In this lesson, we will see how to go back to the previous URL in Laravel Blade, sometimes we need t...