question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Nuxt 3 RC9 - layout warning

See original GitHub issue

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.

Screenshot 2022-09-06 at 16 51 43

My app.vue looks like this to include the header and footer components on each page: Screenshot 2022-09-06 at 17 08 03

Additional context

No response

Logs

No response

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:10 (3 by maintainers)

github_iconTop GitHub Comments

6reactions
danielroecommented, Sep 7, 2022

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.)

1reaction
andreas83commented, Oct 7, 2022

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Nuxt3 - [Vue warn]: Component inside <Transition> renders ...
I'm getting these two vue warnings: nuxt3 vue warnings. I validated that all components, pages and layouts have a single root element.
Read more >
Nuxt 3 Crash Course #6 - Layouts - YouTube
In this Nuxt lesson, you'll lear how to make layout files for your pages. Watch the whole course now (without ads) on Net...
Read more >
Changelog - Nuxt Content
module: Do not warn when sources is empty (42fffc98); module: Set default hostname for dev socket (#1624); Document Driven: Layout prefetching (#1637) ...
Read more >
Nuxt 3 APP Failed to resolve module specifier "Vue" - Support
Hi, i`m trying to deploy a nuxt 3 app and I'm getting a blank page, along with the message: Uncaught TypeError: Failed to...
Read more >
BootstrapVue Nuxt.js Starter Project - CodeSandbox
layouts. pages. index.vue. codesandbox.js. nuxt.config.js. package.json. yarn.lock. Dependencies. bootstrap. ^4.5.3 (4.6.0).
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found