Last updated on December 29, 2022 by Ayaz Ali Shah
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.
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
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.
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.