Migrating from Laravel Mix to Vite
Laravel's default asset bundler is about to switch from Laravel Mix (Webpack) to a wrapper around Vite. I've had a crack at migrating over early starting with some older apps that still use Vue with inline templates and Sass.
Because of the awkwardness of moving these older apps over I ran into some funky edge cases which I thought would be worth making a note of in case they were helpful.
Autoloading Vue components
You can use
import.meta.globEager to fetch a directory and then loop over it to autoload components. This is similar to how it worked with Webpack - using some string magic to convert the filename to a component name.
Importing Font Awesome/Bootstrap through Sass
You can use Sass with Vite by simply installing the
sass dependency. Previously you could import third-party stylesheets by prefixing the vendor name with ~ but that is no longer required and you can import the whole path.
Use the ESM bundler version of Vue
Because my Laravel app isn't a full Vue front-end and instead uses Vue sprinkles I needed to adjust the version of Vue used by Vite. Here's the error received when trying to run the app:
vite.config.js you just need to add the
resolve key to point
vue to the alternate build.