Migration Tips from Laravel Mix to Vite

If you want to upgrade your Laravel Mix code to Vite, you can follow the official upgrade guide or get a free merge request from Laravel Shift. However, if you working on a legacy code base and you want to renew your entire front end application, there is probably a better way.

In my case, I had a legacy application written with a mixture between Vue2 and Blade (see https://iwasherefirst2.medium.com/how-to-include-vue-components-in-laravel-without-losing-blade-engine-fcd63134802d). I wanted to create a new Dashboard from scratch, using Inertija.js and Vue3. My first idea was to scaffold all my front-endfiles a last time and then upgrade to Vite. However, given my circumstances that I also may want to maintain the legacy dashboard build with Vue2 for a bit, I realized that it is handy for me, to create a new npm package.json for Vue3 & Vite, while keeping my legacy code on side.

The trick? I created a folder resources/vite. In the folder, I initialized a new npm packge:

npm init -y

Now install all related packages in that folder

npm install --save-dev vite laravel-vite-plugin
npm install --save-dev @vitejs/plugin-vue

Now I can build my new dashboard using Vite and Inertia.js and transition slowly everything I need. Once I am done with my new dashboard, I can savely remove the outdated webpack.mix :) ❤