How do I use default layouts when using SSR?

[sneakylenny]

I have created a fresh Laravel Jetstream application and wanted to make a default layout. However following the guide does not work. My suspicion is: it's either outdated or SSR requires a different method.

Using require(`./Pages/${name}`).default thew an error: 'Uncaught (in promise) ReferenceError: require is not defined'

So I tried:

// import DefaultLayout from './Layouts/AppLayout.vue'

resolve: (name) => {
  const page = resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')) // adding .default didn't work
  page.layout = page.layout || DefaultLayout
  return page
},

This doesn't return an error but the layout does not appear.
I have tried this both in app.js and ssr.js. Also tried it with restarting the Vite server.
All without success.

Am I missing something or is it a bug?

[sneakylenny]

I've reached out to the devs on Discords and @RobertBoes helped me resolve this problem.

He explained resolvePageComponent (or importPageComponent) returns a promise so we should await this method to obtain the default export.

From there we can set the default layout.

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

This solved my issue. The default layout is showing up and is persistent.

[whitespacecode]

This should be in the docs!
The amount of people i see falling over 'required is not defined' error. And not a word in the docs how to use import
@timyourivh i guess you can also do const page = (await import(./pages/${name}.vue)).default;
Not sure if resolvePageComponent is necessary

[lakshmajee]

Is your layout pre-rendered in HTML response ?