Nuxt 3 RC9 - layout warning

[EmilyFlocc]

Environment

"nuxt": "3.0.0-rc.9",

Reproduction

I just upgraded from rc-8 to rc-9 and I now get this warning

Describe the bug

New warning in browser:
[nuxt] default layout does not have a single root node and will cause errors when navigating between routes.

My app.vue looks like this to include the header and footer components on each page:

Additional context

No response

Logs

No response

[Gruce]

Hello @EmilyFlocc ,
Seems like your default.vue does not have single root node. Could you provide your default.vue code?

[AndersNielsen85]

@EmilyFlocc
I suspect you don't have a layout file since you are using app.vue ?
If this is the case you can workaround this by making a /layouts/default.vue with the following content.

I seems like the default nuxt is using when not having a default.vue layout might have more root nodes.

Background:
nuxt/framework#5469

<template>
  <div class="default-layout">
    <slot />
  </div>
</template>

[EmilyFlocc]

Hi both, thanks for the quick response. Yeah thats correct I don't have a layouts file, I have app.vue in root and error.vue in root. I thought in Nuxt 3 you didn't use layouts in the same way as nuxt 2? Or have I misread the docs?

[danielroe]

If you do not have any layouts, then you do not need to have <NuxtLayout> in your app.vue file. (If you do have a <NuxtLayout> then you should also create a default layout as suggested above.)

[EmilyFlocc]

Thank you for explaining!

[ckald]

Hi, I'm having the same warning despite using no layouts. I also removed the <NuxtLayout> from the app.vue. I also tried to add the layouts/default.vue file to no avail

[danielroe]

Thanks for reporting @ckald ❤️

[andreas83]

Mhm not sure if its related but i have the same issue:

full layout does not have a single root node and will cause errors when navigating between routes.

layout/full.vue

<template> 
            <div>
                  <slot />
            </div>
</template>

and my app.vue:

<template>

    <NuxtLayout>
        <NuxtLoadingIndicator />
        <NuxtErrorBoundary>

            <template #error="{ error }">
                <p>An error occurred: {{ error }}</p>
            </template>

           
            <NuxtPage />
        </NuxtErrorBoundary>

    </NuxtLayout>
</template>

---

• Operating System: Linux
• Node Version: v16.13.1
• Nuxt Version: 3.0.0-rc.12-27746784.92ff066
• Nitro Version: 0.5.4-27726613.640c2b7
• Package Manager: yarn@1.21.1
• Builder: vite
• User Config: buildModules, pageTransition, layoutTransition, publicRuntimeConfig
• Runtime Modules: -
• Build Modules: nuxt-windicss@2.5.2

---

[jacobfogolyan]

Sounds like this one is related to my issue. I was able to re-create this simply by putting <!-- --> at the same level as the root node. Simply removing or adding this comment toggles this error.

[danielroe]

@jacobfogolyan That's unrelated to the issue. The warning you get is right. That will break transitions, which rely on a single root node.