Unwanted div created for client only pages using NuxtLayout + NuxtPage

[abaza738]

Environment

---

• Operating System: Linux
• Node Version: v18.20.3
• Nuxt Version: 3.14.1592
• CLI Version: 3.17.1
• Nitro Version: 2.10.4
• Package Manager: [email protected]
• Builder: -
• User Config: default
• Runtime Modules: -
• Build Modules: -

---

Reproduction

https://stackblitz.com/edit/github-2xmgnqmb?file=pages%2FAbout.client.vue

Describe the bug

With a layout that depends on CSS flexbox, some client only pages are broken because there seems to be a div element created by either NuxtLayout or NuxtPage possibly that is not a flex element. This ruins the page layout for my application.

The reproduction shows two pages, the index.vue page which fills the whole page, and About.vue which does not fill the whole page.

Additional context

In /about, the additional div is highlighted here in the following image.

While in the home page, you do not see the additional div, instead, the .page element is a direct child of #__nuxt.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• github-2xmgnqmb (Open reproduction)

[danielroe]

This is how client-only pages are implemented and is less a bug than a limitation. We could document this, though obviously I would prefer to remove the limitation if possible.

[abaza738]

If there's a way to add style to this div, we could solve the problem by adding display: contents;.

[cernymatej]

display: contents has very bad browser support
I think it would be probably better to allow adjusting the styles similar to how the useHead composable allows editing bodyAttrs