Nuxt App [Vue warn]:Component inside <Transition> renders non-element root node that cannot be-CodePudding

I'm working on a project with Nuxt 3 and I keep getting this warning in the console

[Vue warn]: Component inside <Transition> renders non-element root node that cannot be animated. 
  at <Default > 
  at <AsyncComponentWrapper > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="layout" mode="out-in" > 
  at <Anonymous> 
  at <App key=1 > 
  at <NuxtRoot>

I dont have a transition yet but i think it's coming from nuxt spinner.

layouts/default.vue:

<template>
  <TheHeader />
  <slot />
</template>

I checked all my pages and components, all of them have only one root element of the following (header, nav, div, form, NuxtLink, button, img)

The warning doesn't specify where it's coming from and I don't know how to debug this.

CodePudding user response：

In nuxt 3 everything should only have 1 root element:

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

Just read the docs if you stuck on something: https://v3.nuxtjs.org/guide/directory-structure/layouts

CodePudding user response：

If the transition isn’t in your code, I’d simply ignore the warning. As the warning states it will only cause non working animations for that specific component. I wouldn’t spent any time on debugging this since your code will be unaffected.

Edit: If you really want to debug this, the easiest way is to use the Vue dev tools to search for the transition.