layout slot issue

Hello,

For some reason, my footer ends up above my layout slot everytime I change page.... then it goes back to normal if I refresh the page

The template of my App.vue :

<template>
    <NuxtLayout>
        <NuxtPage />
    </NuxtLayout>

    <UModals />
    <UNotifications />
</template>

<template>
    <NuxtLayout>
        <NuxtPage />
    </NuxtLayout>

    <UModals />
    <UNotifications />
</template>

My layout :

    <Page>
        <Section full class="pt-4 pb-6">
            <!-- <HeaderDefault :menu="leAuth.isAuthenticated ? 'connected' : 'main'" /> -->
            <HeaderDefault />
        </Section>
        <slot />
        <footer class="w-full">
            <Section wide class="bg-neutral-light dark:bg-darkness-700 py-4">
                <FooterDefault />
            </Section>
        </footer>
    </Page>

    <Page>
        <Section full class="pt-4 pb-6">
            <!-- <HeaderDefault :menu="leAuth.isAuthenticated ? 'connected' : 'main'" /> -->
            <HeaderDefault />
        </Section>
        <slot />
        <footer class="w-full">
            <Section wide class="bg-neutral-light dark:bg-darkness-700 py-4">
                <FooterDefault />
            </Section>
        </footer>
    </Page>

Page and Section are divs with spacements, so nothing special really.

Page for exemple in case of :

<template>
    <div :class="`flex flex-col items-center min-h-screen w-screen overflow-x-hidden text-darkness dark:text-neutral-light text-lg font-text font-normal leading-snug bg-neutral-light dark:bg-darkness ${debugP}`">
        <slot />
    </div>
</template>

<template>
    <div :class="`flex flex-col items-center min-h-screen w-screen overflow-x-hidden text-darkness dark:text-neutral-light text-lg font-text font-normal leading-snug bg-neutral-light dark:bg-darkness ${debugP}`">
        <slot />
    </div>
</template>

How can the div under <slot /> can end up before <slot /> ?

Nuxt•12mo ago•

21 replies

Omnislash

layout slot issue

Hello,

For some reason, my footer ends up above my layout slot everytime I change page.... then it goes back to normal if I refresh the page

The template of my App.vue :

<template>
    <NuxtLayout>
        <NuxtPage />
    </NuxtLayout>

    <UModals />
    <UNotifications />
</template>

<template>
    <NuxtLayout>
        <NuxtPage />
    </NuxtLayout>

    <UModals />
    <UNotifications />
</template>

My layout :

    <Page>
        <Section full class="pt-4 pb-6">
            <!-- <HeaderDefault :menu="leAuth.isAuthenticated ? 'connected' : 'main'" /> -->
            <HeaderDefault />
        </Section>
        <slot />
        <footer class="w-full">
            <Section wide class="bg-neutral-light dark:bg-darkness-700 py-4">
                <FooterDefault />
            </Section>
        </footer>
    </Page>

    <Page>
        <Section full class="pt-4 pb-6">
            <!-- <HeaderDefault :menu="leAuth.isAuthenticated ? 'connected' : 'main'" /> -->
            <HeaderDefault />
        </Section>
        <slot />
        <footer class="w-full">
            <Section wide class="bg-neutral-light dark:bg-darkness-700 py-4">
                <FooterDefault />
            </Section>
        </footer>
    </Page>

Page and Section are divs with spacements, so nothing special really.

Page for exemple in case of :

<template>
    <div :class="`flex flex-col items-center min-h-screen w-screen overflow-x-hidden text-darkness dark:text-neutral-light text-lg font-text font-normal leading-snug bg-neutral-light dark:bg-darkness ${debugP}`">
        <slot />
    </div>
</template>

<template>
    <div :class="`flex flex-col items-center min-h-screen w-screen overflow-x-hidden text-darkness dark:text-neutral-light text-lg font-text font-normal leading-snug bg-neutral-light dark:bg-darkness ${debugP}`">
        <slot />
    </div>
</template>

How can the div under <slot /> can end up before <slot /> ?

layout slot issue

Similar Threads

layout slot issue

Similar Threads

Similar Threads

Similar Threads