How To Install Vue 3 in Laravel 9 with Vite

By:
On:
In: Laravel
Tagged: , ,
With: 0 Comments

Hello Geek, As you may know, Laravel is the most popular PHP framework because it is simple to use, scalable, and adaptable. Vue js is a lightweight, easy-to-use and learn progressive framework for building user interfaces. Vue 3 is the latest version of the Vuejs Framework and growing rapidly.

1. Install laravel 

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

or, if you have installed the Laravel Installer as a global composer dependency:

laravel new laravel9-vue3-vite

2. Install NPM Dependencies

npm install

Step 3: Install Vue 3

After installing node modules, we must install vue 3 in our application. To do so, run the following command in the terminal: npm install vue@next vue-loader@next. vue-loader is a webpack loader that allows you to create Vue components in the Single-File Components format. vue-loader@next is a webpack loader for authoring Vue components in single-file components known as SFCs.

npm install vue@next vue-loader@next

Install vitejs/plugin-vue plugin

Install vitejs/plugin-vue plugin in laravel version latest release to install vue3 or vue in laravel. This plugin contains the dependencies needed to run the vuejs application on vite. Vite is a build command that bundles your code with Rollup and runs on the localhost:3000 port to provide hot refresh.

npm i @vitejs/plugin-vue

Step 4: Update vite.config.js file

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

Vite Dev Server Start

npm run dev

Step 5: Create Vue 3 App

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

import {createApp} from 'vue'

import App from './App.vue'

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

Step 6: Create Vue 3 Component

Create a file called ‘App.vue’ in the js folder and fill it with content. For this example, let’s write “How To Install Vue 3 in Laravel 9 with Vite – TechvBlogs,” but you can change 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

In this step, navigate to the resource / views directory, create the app.blade.php file, and add the following code to it:

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

Open routes/web.php and replace welcome.blade.php with vue.blade.php file to load the vue.blade.php file where our vuejs code will execute.

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

Open the.env file and change APP URL to http://localhost:8000. It will aid in quickly checking js and CSS updates and making changes in the browser.

APP_URL=http://localhost:8000

Step 10: Start the Local server

php artisan serve

All the best nerd!

Leave a Reply