How to install Vue3 in Laravel 9 / Laravel 10 with Vite?

Posted by

Mar-11-2023 Laravel VueJs

Vite is a modern front-end build tool that provides a high-speed development environment and bundles your code for production.

In This blog, I showed how to install VueJs in Laravel with Vite.Before transitioning to Vite, new Laravel applications utilized Mix, powered by webpack, when bundling assets. Vite focuses on providing a faster and more productive experience when building rich JavaScript applications.

Step 1: Ensure Node.js (16+) and NPM are installed before running Vite and the Laravel plugin.

node -v
npm -v

Step 2: Create Laravel Project

composer create-project laravel/laravel vue3laravel10

Note: Vite is only available in Laravel 9 and Laravel 10 versions, so make sure you are running the correct laravel version.

Step 3: Install VueJs and Vue Loader using these commands

npm install vue@next vue-loader@next

Now you will see vue and vue-loader in the package.json file.

Step 4: Install the npm package named '@vitejs/plugin-vue'

npm i @vitejs/plugin-vue

Step 5: Configure vite.config.js

You will see the vite.config.js file in root of the project directory, We have to add vue() in the plugin array.

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

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

Step 6: Create Vue3 App

Open the resources/js/app.js file and create an instance of the vue 3, you have to import createApp method from vue this method takes a component as a parameter.

// resources/js/app.js

import './bootstrap';

import {createApp} from 'vue';

import dashboard from './layouts/dashboard.vue'   // In next step we create vue component.

createApp(dashboard).mount('#app')

Here in the mount method, we gave the Id #app We have to give this id in the blade file.

Step 7: Create Vue3 Component

We already imported the dashboard.vue component into app.js, so we have to create this component in resources/js/layouts folder.

<template>
	<div>
		Dashboard Component 
	</div>
</template>
<script>
	export default{
		name: 'dashboard',
	}
</script>

Step 8: Connect the app.js with the Laravel Blade file.

Now, go to resources/views folder and create app.blade.php.

The @vite directive will automatically detect the Vite development server and inject the Vite client to enable Hot Module Replacement. In build mode, the directive will load your compiled and versioned assets, including any imported CSS.

//resources/app.blade.php

<!DOCTYPE html>
<html>
<head>
	<title>Laravel + Vue 3 with Vite</title>
</head>
<body>
	<div id="app"></div>   // You must have to give the same id which you give in the mount method in app.js

	@vite('resources/js/app.js')  // Add app.js in @vite directive
</body>
</html>

Step 9: Add route for app.blade.php

You have to give a route for app.blade.php, in the routes/web.php file.

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

Step 10: Start the development server

npm run dev

Using this command site will watch the changes in the vuejs templates and will update automatically to the browser. This will enable hot reload so you don't have to reload the page every time. You can also check error logs in terminal.

Step 11: Open a new terminal and start the Local server