Pages are rendered outside the layout when page transitions are enabled

[e-tho]

Environment

• Operating System: Linux
• Node Version: v21.1.0
• Nuxt Version: 3.8.2
• CLI Version: 3.10.0
• Nitro Version: 2.8.1
• Package Manager: npm@10.2.0
• Builder: -
• User Config: app, modules, build, plugins, directus, css, i18n, shadcn, tailwindcss, gsap
• Runtime Modules: nuxt-directus@5.6.0, @nuxtjs/i18n@8.0.0-rc.7, @nuxtjs/tailwindcss@6.10.1, shadcn-nuxt@0.1.0, nuxt-particles@0.1.5, @hypernym/nuxt-gsap@2.4.2
• Build Modules: -

Reproduction

https://stackblitz.com/edit/github-tf41bf?file=layouts%2Fdefault.vue

Describe the bug

This behavior appeared recently, when navigating from one page to another with page transitions enabled and a layout such as:

  <AppNavbar />
  <slot />
  <AppFooter />

NuxtPage is rendered after AppFooter in the DOM.

Additional context

No response

Logs

No response

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• github-tf41bf (Open reproduction)

[manniL]

When wrapping a div around, it should work fine. Not sure if this is a bug or a requirement though 🤔

<template>
<div>
  <AppNavbar />
  <div>
    <slot />
  </div>  
  <AppFooter />
</div>
</template>

[huang-julien]

Hey 👋 https://nuxt.com/docs/guide/directory-structure/layouts layouts must have a single root element

[e-tho]

This is indeed an oversight. I forgot that I had removed the div enclosing the layer content when editing, and as it worked without the transitions, I thought that was the cause. I obviously needed some sleep, thanks for the fix.

[e-tho]

@huang-julien

Hey 👋 https://nuxt.com/docs/guide/directory-structure/layouts layouts must have a single root element

After checking the original project, the layout-wrapping div was indeed present, it was an oversight in the reproduction.

@manniL

When wrapping a div around, it should work fine. Not sure if this is a bug or a requirement though 🤔

Wrapping slot in a div does fix the issue.
This behavior did not occur in previous versions of Nuxt, if it wasn't intended I'll reopen this issue.

[manniL]

@e-tho If you can pin-point which nuxt version introduce it, that'd help 👍
I don't think it was intended.

[notflip]

@huang-julien

Hey 👋 https://nuxt.com/docs/guide/directory-structure/layouts layouts must have a single root element

After checking the original project, the layout-wrapping div was indeed present, it was an oversight in the reproduction.

@manniL

When wrapping a div around, it should work fine. Not sure if this is a bug or a requirement though 🤔

Wrapping slot in a div does fix the issue. This behavior did not occur in previous versions of Nuxt, if it wasn't intended I'll reopen this issue.

@e-tho I've got the exact same issue since running yarn install again this morning, this worked fine before.

[huang-julien]

Nuxt layouts should only have one root element with transitions, there should be a console warning about that, do you have it ?

[idorenyinudoh]

yep 👍🏽

[manniL]

Nuxt layouts should only have one root element with transitions, there should be a console warning about that, do you have it ?

@huang-julien But even with a wrapping div around everything, it is not enough. A div around the <slot /> is needed too (see repro + my fixed option. This is different from what the docs describe, right?

[huang-julien]

Indeed sorry ! 👀 i'll take a look, seems like something is happening with vnodes.

Edit: Can't reproduce it locally on the nuxt repo O_o ...

[manniL]

@huang-julien Strange, for me it also work with the nightly build in the StackBlitz 🤔

[luigigorlero]

This also started happening to us after 3.8.2 update, I believe. Disabling transitions (or using mode: 'in-out' instead of out-in) fixes the issue.
We are using app.vue instead of layouts but same principle. Our App.vue looks like this:

<template>
  <NuxtLoadingIndicator color="var(--black)" :height="2" />
  <AppNavigation />
  <NuxtPage class="page-wrapper" />
  <AppFooter />
</template>

Every page does have a single node.
Wrapping <NuxtPage /> in a div also fixes the issue (and you get to keep your nice transitions)

[Triloworld]

Nuxt version where issue show up:

"nuxt": "^3.8.2",

Issue resolved when is used <div> wrap for <slot/>

Setting in nuxt.config.js:

  app: {
    layoutTransition: {
      name: "page",
      mode: "out-in",
    },
    pageTransition: {
      name: "page",
      mode: "out-in",
    },
  }

[ivanushkaPr]

I got this error in nuxt 3.7.3.
As mentioned before, changing mode from out - in to in -out fixes the issue.
And my layout have only one parent element. Wrapping slot into div fixes the issue too.

[CaptainFalcon92]

Hello,

I encountered this bug for the first time today after upgrading to 3.9.
The exact same project with the exact same code did not have this bug before upgrading (10min ago).

Now my page content is placed after my footer, completely ignoring the <slot> placement.
I do have a single div element as root of my layout.

Wrapping the <slot> with an additional div does solve the bug; still this make no sens the problem appeared only now for me. Also, do you think it should be ideally explicitly requested in the doc to always wrap the slot in a div ?

[manniL]

This behavior has been introduced in Vue 3.3.10, probably related to vuejs/core#9309

[manniL]

Let's track in vuejs/core#9996

[volkipp]

@manniL I just happened to run into this issue in Nuxt 3.9.1. It looks as if the Vue 3.4.6 update fixed the original attached Stackblitz example, but I ran into more issues with reordering on my project. I discovered that if you change to a page using a different layout structure, then transition back, the reordering layout bug comes back. Here is an example updated Stackblitz using the latest Nuxt 3.9.1 and Vue 3.4.6:
https://stackblitz.com/edit/github-tf41bf-kqwznh?file=layouts%2Fdefault.vue

I introduced a new layout called "blank" and a third page using the blank layout. Navigating between home page and second page do not break no matter how many times you toggle between the two until you navigate to "third page" with the different layout.

Steps to reproduce:

• Navigate to "third page"
• Navigate home
• Navigate to "second page"
  Notice that the second page appears below the footer.

Unfortunately it looks like this causes the original reordering bug to come back just as before vuejs/core#9996 was marked fixed with vuejs/core@a3fbf21

Thanks for all the help getting to the bottom of this bug! Let me know if there are any other details I can provide to help.

[manniL]

@volkipp Thanks for reporting ☺️
best would be to reproduce as I did in vuejs/core#9996 and create a new issue there!

[volkipp]

@manniL I'd be happy to help out, though it seems my knowledge of how the inner workings of Nuxt layouts are lacking. If you have any advice on how to get this bug resolved or flagged for people with a little better working knowledge than me, it would be much appreciated.

This was my (failed) attempt at reproducing the problem in the Vue SFC Playground in case you have any ideas on how to recreate my Stackblitz link:
https://play.vuejs.org/#eNqNVE1v2zAM/SuCL06AxM6WYQcvabsOBbZhWIe2t3kYVJtJ1MqSIclOiyL/fZTk+CNJh55sUnyP5COll+BzWUZ1BUESLHSmWGmIBlOVZ6lgRSmVIS9EbyjncnsDqwnZkB1ZKVmQEEHhp1SkIpNCG3ItgCzJaEyWZ2QzCnNWhxPEZpxqnZDQgDYh2U1IKAWE4z3qbivfhjJbaVF73A/6LCvT5PxrIZpLo8nOMaWCnGLjDuT4ftsQF7R5b2NsCs9JvgLNQYXjiQ9xvFEOK1pxQ86HNhaOvKGN/DNGMfrFNa0dFdcVdlAX1vCGZD6YHOhRM9hitm5SI9SmVbnBDM5bBduojLPssZ3Gi23K0kY15ZXVuW8sl27g526Aif1PxW5A1Kg5oPN1tIRDEym7qZ73REw6v0uyiP2i4oqiYaAoOTWAFiELVPbsTpaL2P44z22lSxDan6OdSVxrAcKQhOllGvgi0qA5xwijqNDMMCmIoAVgTEnXkAakkLm1MHzKBNpJXilq49A5n836HAdZT2a2eiJL3KHiI9gi7qrpOVuqfVdDpJPhUhoji54S9xU6BGE55jZyveZwaWwbF25e6HRf7MIHLmL/fQ3sh3KKwp8gUbN3R3zYVTc1NLV55vY3skJPsS1QU5oZVgNeQu/kQGtonH6ZOmESgltNZtEHjVcQF2RIZF+rAxojPYUsacbMc0JmCCRkxTgCEnLPKzV6p6CwV9ovXFNgMAn8qzgtaBk9aCnw3XRUaXOg0yDx5NaHb6S102BjTKmTOM5ygbAcOKtVJMDEoiziCwyLVSUMK2Cay+JiHn2IPuLgtOm7I9DF9F7JrQaFJGnQvFAuTYzOGrtVIPD1AvXWtAewfuqDo6P0Njuqs0NRjMabv2LrA0nsmjIO6rq0YxpK4x6i785nVGUH7f3ZBrLHE/4H/eR7+qXAVdbr31C1Blw4e3x1+xOe8L89xFtb8WYMrxzegJa8sjX6sMtK5Fh2L85V+81NmIn1nb56Mnjb9k3ZQp0aLt7N48t/Wu/KnUfzVsXdPzdRhKg=