Sebastian De Deyne
Designer & developer at Spatie

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 implementation
  • import 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.

Path aliases

If you enjoyed this post, you might be interested in my newsletter. I occasionally send a dispatch with personal stories, things I’ve been working on in the past month, and other interesting tidbits I come across online.