Reorganising Pages in Inertia JS

This article was first posted on my personal blog: neoi.sh

Recently I started using Inertia JS in a project and I had to change how pages were loaded. If you have used Inertia JS, you would already know that by default on the client side, pages are loaded from the Pages directory.

However, I had a use case that was not very easy to work with initially. The use case was simple, I had an application that I wanted to be extendable by packages. In other words, I wanted packages to be able to supply their own Inertia Pages and they should also be loaded by Inertia on the main application.

Turns out figuring something like this out was actually not that complicated. In the example written in the documentation, you can see something like this:

This example assumes you are using Vue JS version 3, but the same principle applies for other supported frameworks

import { createApp, h } from "vue";
import { App, plugin } from "@inertiajs/inertia-vue3";
const el = document.getElementById("app");
createApp({
  render: () =>
    h(App, {
      initialPage: JSON.parse(el.dataset.page),
      /* Pay attention to here */
      resolveComponent: (name) => require(`./Pages/${name}`).default,
    }),
})
  .use(plugin)
  .mount(el);