Remove Persistent "Default" Layout for specific page

[mrleblanc101]

Hey 👋

I have an app with 2 layouts, one authenticated, one unauthenticated.
I made the authenticated layout Persistent because it has a sidebar with a scroll, and I didn't like that the scroll was reset on every page change.

I added it as a Persistent Layout like so, and made it the default layout:

resolve: async (name) => {
    const page = await resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob<DefineComponent>('./Pages/**/*.vue'));
    page.default.layout = page.default.layout || DefaultLayout
    return page;
},

So now I don't have to import and specify it every time like so in every page:

import DefaultLayout from '@/layouts/DefaultLayout.vue';

defineOptions({
   layout: DefaultLayout,
});

This work great, but now on my unautheticated page, I release that I need a layout with multiple slots !
Multiple slots is not supported in persistent layout, so I would like to "reset" the persistent layout to null and use a regular layout inside the page.
I found a way to do it, but it looks hacky, so I'm wondering if there is something more clean ?

In my page, I added this:

defineOptions({
    layout: null,
});

And changed my app.ts to this:

resolve: async (name) => {
  const page = await resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob<DefineComponent>('./Pages/**/*.vue'));
  if(page.default.layout !== null) {
      page.default.layout = page.default.layout || DefaultLayout
  }
  return page;
},

So if I do not have a defineOptions in the page, the value of layout will be undefined and it will fallback to DefaultLayout.
But if the defineOptions is set with a value of layout: null, it won't render a persistent layout.

[Spice-King]

Try this:

defineOptions({ layout: false });

createInertiaApp({
  resolve: async (name: string): Promise<DefineComponent> => {
    const importPage = pages[`./Pages/${name}.vue`];
    // Forgetful dev error handling
    if (!importPage) {
      if (import.meta.env.DEV) return PageComponentMissing as DefineComponent;
      throw new Error(
        `Unknown page ${name}. Is it located under Pages with a .vue extension?`,
      );
    }
    const page = await importPage();
    page.layout ??= BaseLayout;
    page.layout ||= null;
    return page;
  },
});

Technically, you could omit page.layout ||= null; as the adapter does check for falsey values rather than null or undefined.

Enjoy the bonus tip with PageComponentMissing.

[mrleblanc101]

Oh yeah, I can completely remove the if() statement and null check if I simply use false and change || for ??.

resolve: async (name) => {
    const page = await resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob<DefineComponent>('./Pages/**/*.vue'));
    page.default.layout = page.default.layout ?? DefaultLayout
    return page;
},