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,
},
},
}),
],
});
