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 #231 (comment) 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.

[atakansn]

I did not encounter a problem when I used NuxtLayout, did it cause a problem for you?

[qkreltms]

I tried it and seems work when you want to use nuxt layout and ion hybrid app

  <Suspense>
    <NuxtLayout>
      <IonApp>
        <IonRouterOutlet />
      </IonApp>
    </NuxtLayout>
  </Suspense>

notice: you should set layout: false when you want to use IonApp without layout outherwise layout will be used.

example:

<IonPage>...</IonPage>

definePageMeta({
  middleware: () => {
    const config = useRuntimeConfig();
    if (config.public.BUILD_ENV === 'USE_ION') {
      setPageLayout(false);
    }
  },
  layout: 'home',
});

[reslear]

ionic-team/ionic-framework#29794
ionic-team/ionic-framework#29925
Has anyone already tried it? Could this change the game?