I love how fast vite is and adopted vite into my Laravel projects using laravel-vite. About a month ago, Laravel announced that vite will replace Laravel Mix to be the default frontend asset bundler. I decided to migrate to the official plugin and try it out.
Overall, I find the official plugin provides a much better experience. The official plugin has a more seamless configuration, where the configs are all done in vite.config.ts, removing the need for a separate config/vite.php file (perhaps due to some Laravel Magic™ baked in). Hence, I highly recommend migrating to the official plugin if you have an hour or two to spare.
How to migrate to the official plugin
Step 1: Remove old packages
First, we need to remove the laravel-vite package as well as configs.
With the official vite plugin, there are two ways to use static assets. With laravel-vite, it is likely that you imported the asset and let vite bundle the assets at build time. However, the official plugin also supports using assets from the /public directory, allowing Laravel to serve the asset instead. This can be achieved by specifying an absolute path instead of a relative one:
<!-- This asset is not handled by Vite and will not be included in the build --><img src="/taylor.png"><!-- This asset will be re-written, versioned, and bundled by Vite --><img src="../../images/abigail.png">
If you need to access the dev environment from another machine, you’ll need to specify the server host and port. Laravel will then use these values to load the JS files from HTML.
<!-- This is what will be injected when you load the page via the browser --><script type="module" src="http://192.168.1.5:3005/resources/js/app.ts"></script><script type="module" src="http://192.168.1.5:3005/@vite/client"></script>
Personally, I use .env to change these values instead:
At this point, vite has not load the environmental values so import.meta.env does not work. Instead, I use env-cmd to load up the environmental values beforehand: