How to install Laravel 9 with Vite?

A major change can be seen in Laravel version 9.19 which is Vite. The new build tool Vite is a replacement for the Laravel mix that compiles the bundles faster.  In Laravel Mix, we were using the npm run command for watching the changes but with Vite, there is no need to run any additional command.

The Vite server runs in the background to monitor each change we make in the views file and then serves in the browser. So when you install Laravel version 9.19 or above you will see a new file vite.config.js that is replaced with webpack.mix.js.

Advantages of Vite in Laravel

• Fast installation experience
• It compiles bundles faster
• Just with one command it serves the application and watches every change

Install Vite with Laravel Breeze

Let’s install a fresh application of Laravel through composer. Run below command

laravel new laravel-vue-vite

It would take a few seconds to install a fresh application into your local web server. Once it is installed you will see vite.config.js file in the root. Next, you need to configure the database and run migrations.

In the next step install Laravel breeze by the following command,

composer require laravel/breeze

After this install breeze with vuejs

php artisan breeze:install vue

Next, npm needs to install. So run the below command to install npm

npm install

It might show some warning which can be ignored. At this point, you have completed all steps which were required. Now, you can run the last command that serves the application on the Vite server

npm run dev

The above command provides a URL to open the application in the browser. Copy and paste the URL and run it in the browser. Now if you make any changes to the file Vite server will be showing without any page reload.

Conclusion

Vite is a modern tool that compiles bundles faster than Laravel Mix. The Vite’s development server runs in the background to monitor changes in the views file and then serves in the browser. In this article, we have learned about Vite and its installation steps. If you would like to learn more about Laravel, check out our Laravel page.

---

Written by

Ayaz Ali Shah

I am a skilled full-stack developer with extensive experience in creating and deploying large and small-scale applications. My expertise spans front-end and back-end technologies, along with database management and server-side programming.

---

---

Related Posts

• 1. Install Bootstrap 5 in Laravel 10
• 2. How to Get Client IP Address in Laravel 10?
• 3. How to Create Route in Laravel 10?
• 4. How to Create and Run Controller in Laravel 10?
• 5. Laravel 10 Eloquent Mutators and Accessors