Vite with Laravel: Using Inertia.js
Time for the last—and my favorite—post in the Vite series: using Inertia.js.
Inertia suggests two ways to resolve views in the docs: with require
or with import
.
require
bundles all your pages in a single file, it’s a Webpack-specific implementationimport
code splits your pages to multiple chunks, and is part of ECMAScript
Because import
is a standard, it’s supported our of the box. One little catch compared to usign it with Webpack: with Vite, you must specify the extension in the import
template literal.
resolveComponent: async (name) => {
return (await import(`./Pages/${name}.vue`)).default;
},
This setup will code split and emit a JavaScript file per page in the final build.
Without code splitting
If you’d rather bundle your pages in a single file (similar to using require
with Webpack) you can use import.meta.globEager
instead.
resolveComponent: (name) => {
const pages = import.meta.globEager(`./Pages/${name}.vue`);
return pages[`./Pages/${name}.vue`].default;
},
Advanced imports
import.meta.globEager
and its sibling import.meta.glob
are also useful for advanced import patterns, similar to Webpack require.context
.
In one of our projects, we use the following structure:
resources/
js/
app/
posts/
components/
views/
Edit.vue
Index.vue
Show.vue
profile/
components/
views/
Edit.vue
Show.vue
app.js
In this case, we only want to bundle components in views
folders as pages. Files in components
aren’t meant to be rendered by Inertia.
A setup like this can be bundled with a glob:
resolveComponent: async (name) => {
const pages = import.meta.glob('./app/**/views/*.vue');
return (await pages[`${name}.vue`]()).default;
},
That concludes the Vite with Laravel series! If you have questions or requests for more posts, talk to me on Twitter.