Vite with Laravel: Using Inertia.js

29 Mar 2021

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.