Alternative to NuxtLayout?

[scalemaildev]

🆒 Your use case

I'd like to use Nuxt's layouts feature for my app but the docs warn me away from use of NuxtLayout proper.

🆕 The solution you'd like

An ion alternative to NuxtLayout, or if one already exists, instructions added to the nuxt/ionic docs (under Watchouts).

🔍 Alternatives you've considered

Currently I'm using NuxtLayout against the doc's advice by using the code snipper in https://github.com/nuxt-modules/ionic/issues/231#issuecomment-1409776448 wrapping it within ion-app.

ℹ️ Additional info

No response

[Ismaele-silla]

I came here just to write the same request. Nuxt layouts are awesome, it's sad we can't use them by default (thanks for the awesome work so far)

[StevenGFX]

Came here for this as well and was looking for a suitable work-around but doesn't seem to be one at this time. 😢

[unitythemaker]

For anyone needing a workaround, you can create a component like this and use it everywhere: components/layout/Default.vue

<template>
  <ion-page>
    <ion-content class="h-screen overflow-hidden">
      <Toaster />
      <div class="app-padding font-default bg-background h-screen flex flex-col">
        <slot />
      </div>
    </ion-content>
  </ion-page>
</template>

pages/welcome.vue

<template>
  <LayoutDefault>
    ...
  </LayoutDefault>
</template>

I really would love to have layouts though. I need this feature to not wrap every page in a custom component like above.