How to Add Vue js 3 to Laravel 11 with Vite
In this tutorial, we are going to see how to add Vue js 3 to Laravel 11 with Vite, since version 9.19 Laravel has moved from Webpack to Vite which becomes the default frontend asset bundler for Laravel applications.
Install packages we need
First of all, I assume that you have already installed a fresh new Laravel application, we will add Vue js 3 and the 'vitejs/plugin-vue' plugin to our project.
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>
Add vue js to laravel 11
</template>
<script setup>
</script>
<style>
</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>