How to Add Vue js 3 to Laravel 12 with Vite

2 months ago admin Laravel

This tutorial will show us how to add Vue js 3 to Laravel 12 with Vite. Since version 9.19, Laravel has moved from Webpack to Vite, which became the default front-end asset bundler for Laravel applications.




Install the packages

First of all, I assume that you have already installed a fresh new Laravel 12 application. We will add Vue js 3 and the 'vitejs/plugin-vue' plugin to our application.

                                                    
                                                                                                                
npm install vue
npm i @vitejs/plugin-vue  

Update the file vite.config.js

Next, let's 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({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});



Create the home component

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

                                                        
                                                                                                                        
<template>
   <div>
        Add vue js to laravel 12
   </div>
</template>

<script setup>
</script>

<style scoped>
</style>

Update the file app.js

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

                                                        
                                                                                                                        
import './bootstrap';

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.

                                                        
                                                                                                                        
<!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>

Related Tuorials

How to Add Query Parameters to Laravel Pagination

In this lesson, we will see how to add query parameters to Laravel pagination.Our goal in this lesso...


How to Add Query Parameters to Laravel Pagination with Vue 3 and Inertia.js

In this lesson, we will see how to add query parameters to Laravel pagination with Vue 3 and inertia...


How to Build a Shopping Cart in Laravel 12 (Step-by-Step) Part 3

In the third part of this tutorial, we will display the products on the home page and add, update, a...


How to Build a Shopping Cart in Laravel 12 (Step-by-Step) Part 2

In the second part of this tutorial, we will add the controllers we need with the function...


How to Build a Shopping Cart in Laravel 12 (Step-by-Step) Part 1

In this tutorial, we will Learn how to create a fully functional shopping cart in Laravel 12. The us...


How to Add a Relationship to a Select in Filament

In this lesson, we will see how to add a relationship to a select in Filament.Let's assume that we h...


How to Generate Slugs from a Title in Filament

In this lesson, we will see how to generate slugs from a title in Filament, Sometimes we need to gen...


How to Change the Order of the Filament Left Navigation Menu Items

In this lesson, we will see how to change the order of the filament left navigation menu items.Somet...


How to Hide the Info Widget on the Filament Dashboard

In this lesson, we will see how to hide the info widget on the Filament dashboard. The info widget i...


How to Add Bootstrap 5 to Laravel 12 with Vite

In this tutorial, we will see how to add Bootstrap 5 to Laravel 12 with Vite, The process is simple...