Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Alternative to NuxtLayout? #487

Open
scalemaildev opened this issue Nov 25, 2023 · 3 comments
Open

Alternative to NuxtLayout? #487

scalemaildev opened this issue Nov 25, 2023 · 3 comments
Labels
enhancement New feature or request

Comments

@scalemaildev
Copy link

scalemaildev commented Nov 25, 2023

🆒 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

@scalemaildev scalemaildev added the enhancement New feature or request label Nov 25, 2023
@Ismaele-silla
Copy link

Ismaele-silla commented Dec 14, 2023

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
Copy link

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

@danielroe danielroe removed their assignment Jan 9, 2024
@unitythemaker
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

5 participants