How To Install Vue 3 In Laravel 9 With Vite

Websolutionstuff | Oct-10-2022 | Categories : Laravel VueJs

In this article, we will see how to install Vue 3 in laravel 9 with vite. In the previous article, we will install laravel 9 with vue 3. So, we will be installing vue 3 in laravel 9 latest version. Laravel 9 has major changes. Vite has replaced Laravel Mix in new Laravel installations when bundling assets. There is no more webpack.mix.js file in the laravel root in the place of the webpack.mix.js file vite.config.js file is introduced.

Vite is a modern front-end build tool that provides an extremely fast development environment and bundles your code for production. Before transitioning to Vite, new Laravel applications utilized Mix, which is powered by webpack. Vite is used to bundle your application's CSS and JavaScript files. 

Vue.js is an open-source model–view–viewmodel front-end JavaScript framework for building user interfaces and single-page applications it is lightweight and easy to use and learn.

So, let's see laravel 9 install Vue 3 with vite.

Step 1: Install Laravel 9

Step 2: Install NPM Dependencies

Step 3: Install Vue 3

Step 4: Configure Vite and Update vite.config.js

Step 5: Compile the assets

Step 6: Create Vue 3 App

Step 7: Create Vue 3 Component

Step 8: Add Vue 3 Component and Vite Directive in Laravel Blade

Step 9: Add Route

 

Step 1: Install Laravel 9

 In this step, we will install laravel 9 using the following command.

composer create-project --prefer-dist laravel/laravel laravel-9-vite-vue3

 

 

Step 2: Install NPM Dependencies

Now, we will install NPM using the following command.

npm install

 

Step 3: Install Vue 3

In this step, we will install vue 3 in the laravel 9 application. vue-loader is a loader for webpack that allows you to author Vue components in a format called Single-File Components

npm install vue@next vue-loader@next

 

Step 4: Configure Vite and Update vite.config.js

Now, we will install vitejs for Vue 3 in laravel 9. This plugin provides the required dependencies to run the vuejs application on vite.

npm i @vitejs/plugin-vue

Now, we will open vite.config.js and add the below code in that file and also import the laravel-vite-plugin.

// 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 5: Compile the assets

Now, after installing the vue 3 we will run dev using the following command. Also, starts a vite server on http://localhost:3000. you can not open it in the browser as it is for vite hot reload and it runs in the background and watches the assets of your application like js and CSS.

npm run dev

 

Step 6: Create Vue 3 App

In this step, we will create vue 3 app. In resources/js/app.js we will import vue and create the app. 

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

import {createApp} from 'vue'

import App from './App.vue'

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

 

Step 7: Create Vue 3 Component

In this step, we will create a file name App.vue in the JS file.

<template>
    Laravel 9 install vue 3 with vite - Websolutionstuff
</template>

 

 

Step 8: Add Vue 3 Component and Vite Directive in Laravel Blade

In this step, we will create the app.blade.php file.

resource/views/app.blade.php

<!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 9: Add Route

In this step, we will add a route in the web.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');
});

Also, we will change the .env file.

APP_URL=http://localhost:8000

Run the server using the following command.

php artisan serve

 


You might also like:

Recommended Post
Featured Post
How To Create Bar Chart In Laravel 9 Using Highcharts
How To Create Bar Chart In Lar...

In this article, we will see how to create a bar chart in laravel 9 using highcharts. A bar chart or bar graph is a...

Read More

Oct-05-2022

How To Send Email Using Markdown Mailable Laravel 9
How To Send Email Using Markdo...

In this article, we will see how to send email using markdown mailable laravel 9. we will learn laravel 9 to s...

Read More

Aug-05-2022

Laravel 9 Left Join Query Example
Laravel 9 Left Join Query Exam...

In this article, we will see the laravel 9 left join query example. laravel 9 left join eloquent returns all rows from t...

Read More

Mar-31-2022

How to Convert DateTime to Timestamp in PHP
How to Convert DateTime to Tim...

In PHP, converting DateTime objects to timestamps is a common task, especially when dealing with databases or manipulati...

Read More

Mar-13-2024