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.

const app = createApp({});

const components = import.meta.globEager("./components/**/*.vue");

Object.entries(components).forEach(([path, definition]) => {
  app.component(path.split("/").pop().split(".")[0], definition.default);
});

app.mount("#app");

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.

$fa-font-path: "@fortawesome/fontawesome-free/webfonts";
@import "@fortawesome/fontawesome-free/scss/fontawesome";
@import "@fortawesome/fontawesome-free/scss/solid";

@import "variables";
$icon-font-path: "bootstrap-sass/assets/fonts/bootstrap/";
@import "bootstrap-sass/assets/stylesheets/bootstrap";

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:

runtime-core.esm-bundler.js:38 [Vue warn]: The `compilerOptions` config option is only respected when using a build of Vue.js that includes the runtime compiler (aka "full build"). Since you are using the runtime-only build, `compilerOptions` must be passed to `@vue/compiler-dom` in the build setup instead.
- For vue-loader: pass it via vue-loader's `compilerOptions` loader option.
- For vue-cli: see https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-loader
- For vite: pass it via @vitejs/plugin-vue options. See https://github.com/vitejs/vite/tree/main/packages/plugin-vue#example-for-passing-options-to-vuecompiler-dom
(anonymous) @ app.js:24
runtime-core.esm-bundler.js:38 [Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js". 
  at <App>

In your vite.config.js you just need to add the resolve key to point vue to the alternate build.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    resolve: {
        alias: {
            vue: "vue/dist/vue.esm-bundler.js"
        }
    },

    plugins: [
        laravel([
            'resources/sass/app.scss',
            'resources/js/app.js',
        ]),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});