Default Persistent Layout In Laravel Inertia Vite-CodePudding

In the previous way of setting up inertia in a laravel app, I could tweak the resolve property in the `createInertiaApp function from:

{
   ...,
   resolve: name => import("./Pages/${name}"),
   ...
}

{
   ...,
   resolve: name => {
    const page = require("./Pages/${name}").default
    if(!page.layout) {
     page.layout = DefaultLayoutFile
    }
   },
   ...
}

To allow me manually pass a default layout file to be used in pages.

But with Vite becoming the default asset bundler and according to the docs, I must use a resolvePageComponent function which takes in import.meta.glob as a second argument to instruct Vite which files to bundle.

Problem here is the import gets returned from this resolvePageComponent so I cannot access the default object like I normally will from a require function.

So I have not been able to attach a default layout file to imported pages.

Has anyone been able to find a workaround for this?

CodePudding user response：

Assuming you imported your default layout file like this (remember to not use @ in imports anymore as only relative paths work for static analysis reasons):

import DefaultLayoutFile from './Layouts/DefaultLayoutFile.vue'

You can use the following code to get default layout working with Inertia and Vite:

  resolve: (name) => {
    const page = resolvePageComponent(
      `./Pages/${name}.vue`,
      import.meta.glob("./Pages/**/*.vue")
    );
    page.then((module) => {
      module.default.layout = module.default.layout || DefaultLayoutFile;
    });
    return page;
  },