How To Install Vue 3 In Laravel 9 With Vite Tutorial

Hello Artisan,

You know that Laravel has been released Vite for compiling your assets. You know that Vite is a frontend build tool that provides an extremely powerful and fast development environment and bundles your code for production. When building applications with Laravel, we will use Vite to bundle your application's CSS and JavaScript files into production-ready assets.

So in this tutorial, I will show you how we can install vue js 3 in Laravel 9 application with Vite. If you don't know how to install that, then you are a right place. After completing this post, you’ll be able to create a Vue 3 and Laravel 9 application powered by Vite. 

Let's see the example step of installing vue 3 with Laravel 9 powered by Vite:

Step 1: Install Laravel 9

In this step, we will install a fresh Laravel application. Run the below command to install:

composer create-project --prefer-dist laravel/laravel:^9.0 laravel9-vue3-vite

Step 2: Install NPM

Run the following command to install frontend dependencies:

npm install

Step 3: Install Vue 3

Now after installing node modules we need to install vue 3 in our application by the following command:

npm install vue@next vue-loader@next

Now install the following vite packages:

npm i @vitejs/plugin-vue

Now we have to update vite.config.js file like the below:

vite.config.js

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',
        ]),
    ],
});

Now run the below command to compile our assets.

npm run dev

Step 4: Create Vue 3 App

In this step, we will create a vue 3 application. So create it like below:

resources/js/app.js

require('./bootstrap');

import {createApp} from 'vue'

import App from './App.vue'

createApp(App).mount("#app")

Step 5: Create Vue 3 Component

In this step, we will create vue 3 components. So create it like below:

Step 6: Update Master File

Now in this step, we have to set up our blade master file. So update it like this:

Read also: Vuex Complete Guide with Axios Api Call in Vue Js

Now run php artisan serve and test. Everything is set to go.