Vite is the new front-end tooling for Laravel. Let's see how we can move a given Laravel project to Vite together. The L

Moving A Laravel Webpack Project To Vite

submited by

Style Pass

2022-06-30 03:00:03

Vite is the new front-end tooling for Laravel. Let's see how we can move a given Laravel project to Vite together.

The Laravel documentation contains an entire section explaining how it works and how to use it. But most of us are more interested in using it in an existing project. So that's what this post is for.

Make sure to have the latest version of Laravel installed, which today is 9.19, to make use of the new Vite tooling. Then we need to install two new dependencies:

Since Vite is a replacement for webpack, we can remove the laravel-mix dependency and delete the webpack.mix.js file from our application.

It will compile your assets lighting fast! To make your assets production-ready, you can use the new npm run build script to version and bundle your assets.

In the background, Vite is now using the new assets compiled to the public/build directory. This means we can delete the old asset folders, public/css and public/js, in my case.