How To Install Vue 3 In Laravel 9 With Vite

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

Read More: How To Install Vue 3 In Laravel 9 With Vite

If this post was helpful, please click the clap 👏 button below.