How to Setup Vue 3 in Laravel 9 with Vite

We will discover how to install Vue js 3 in Laravel 9 using vite in this post. This article explains how to install Vue 3 on Laravel 9 using the most recent updates. You’ve come to the correct place if you’re looking for an example of installing Vue 3 in Laravel-Vite. As of the time this article was written, the most recent version of the Laravel framework was 9 with Vita. As you are aware, Laravel is the most widely used PHP framework due to its simplicity, scalability, and flexibility. A lightweight, user-friendly framework for creating progressive web applications, Vue.js is simple to use and understand. The most recent version of the Vuejs Framework is Vue 3, which is expanding quickly.

You will be able to use vite to develop an application that uses Vue 3 and Laravel 9 by the end of this post. Additionally, we’ll learn how to connect a Vue 3 component to a Laravel 9 blade file.

How To setup Vue 3 in Laravel 9 with Vite

To install Vue 3 in the Laravel 9 application, follow these instructions.

• Install laravel 9 App
• Install NPM Dependencies
• Install Vue 3
• Update vite.config.js
• Compile the assets
• Create Vue 3 App
• Create Vue 3 Component
• Connect Vue 3 Component with Laravel blade file and use vite directive to add assets.
• Update Laravel Routes
• Start The Local Server

1. Install laravel 9 App

To start a new Laravel project, first launch Terminal and type the following command:

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

Similarly, in the event that the Laravel Installer has been set up as a global composer dependency:

laravel new laravel9-vue3-vite

2. Install NPM Dependencies

In order to install frontend dependencies, use the following command:

npm install

Step 3: Install Vue 3

Installing vue 3 in our application is now necessary after installing the node modules. To do this, type the following command into the terminal: npm install vue@next vue-loader@next. You can author Vue components in a format known as Single-File Components by using the vue-loader webpack loader. Webpack uses the vue-loader@next loader to author Vue components as single-file components, or SFCs.

npm install vue@next vue-loader@next

Step 4: Install vitejs/plugin-vue plugin

Install the vitejs/plugin-vue plugin in the most recent version of Laravel 9 to install Vue 3 or Vue in Laravel. The dependencies needed to run the vuejs application on vite are provided by this plugin. Vite is a build command that uses the localhost:3000 port to enable hot refresh functionality and bundles your code with Rollup.

npm i @vitejs/plugin-vue

Step 4: Update vite.config.js file

Vite is a module bundler for modern JavaScript applications. Open vite.config.js and copy-paste the following code. Import laravel-vite-plugin and first invoice defineConfig from vite at the top of the file. Here plugins() take the path of the js and CSS file and create bundles for your application.The plugins array has to have vue() added.

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

Step 4: Vite Dev Server Start

Following the installation of vue 3, we must launch the vite development server. To do this, use the following command, and it will monitor your resources/js/app.js and resources/css/app.css files. Additionally, a vite server is started at http://localhost:3000. It is designed for vite hot reload and cannot be used in a browser. Instead, it runs in the background and monitors your application’s assets, such as CSS and JavaScript.

npm run dev

Step 5: Create Vue 3 App

Make an instance of the vue 3 in resources/js/app.js. You import { createApp } from ‘vue’ first, then createApp Here, we’ve supplied App as the parameter. You can first build a vue file, which is the primary file in charge of the vueJavaScript content with the name App.vue.

// app.js
require('./bootstrap');

import {createApp} from 'vue'

import App from './App.vue'

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

Step 6: Create Vue 3 Component

Make a file called “App.vue” within the “js” folder, and enter content. For this example, let’s write “How To Install Vue 3 in Laravel 9 with Vite – TechvBlogs.” You can modify it to suit your needs.

<template>
    How To Install Vue 3 in Laravel 9 with Vite - TechvBlogs
</template>

Step 7: Connect Vue 3 Component with Laravel blade file

This step involves creating the app.blade.php file in the resource/views directory and adding the following code to it as follows:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>How To Install Vue 3 in Laravel 9 with Vite</title>

	@vite('resources/css/app.css')
</head>
<body>
	<div id="app"></div>

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

Step 8: Update Laravel Routes

For our vuejs code to run, open routes/web.php and replace welcome.blade.php with vue.blade.php. This will load the vue.blade.php file.

<?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

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

Step 9: Update .env file

Update APP_URL by opening the.env file and setting it to http://localhost:8000. It will be easier to quickly check for modifications to the CSS and JSON and make instantaneous adjustments in the browser.

APP_URL=http://localhost:8000

Step 10: Start the Local server

To launch the development server, open a new terminal and type the following command into it. The project is launched by default on the localhost 8000 port, but you have the option to modify it. In order for the site to monitor changes made to the vuejs templates and update the browser automatically, execute npm run dev server as well. in the event that you are using the same port number for another project.

php artisan serve

and navigate to the following link http://localhost:8000/

I appreciate your interest in my blog.