Nuxt3控制台报Transition内组件渲染非元素根节点警告如何排查

问题复现 #

Nuxt 3项目开发过程中控制台持续抛出如下Vue警告，未自定义过渡动画配置，怀疑来自Nuxt内置spinner加载组件：

[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>

当前layouts/default.vue模板代码如下：

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

已逐一排查所有页面、业务组件，确认均为单个根元素，元素类型覆盖header、nav、div、form、NuxtLink、button、img，但警告未标注具体触发位置，无法定位问题。

问题根因 #

警告触发点就是layouts/default.vue本身：该布局组件存在两个平行根节点，分别是<TheHeader />组件和<slot />插槽出口，属于Vue的Fragment多根结构。
Nuxt 3默认对布局切换启用了内置的<Transition name="layout">过渡效果，Transition组件要求直接子节点必须为单个可绑定动画的实体DOM元素根节点，多根Fragment、纯文本/注释节点这类非元素节点都会触发该警告，和业务组件、内置spinner组件无关。

修复方案 #

二选一即可：

• 给布局模板添加单根包裹节点（推荐，不修改Nuxt默认行为）
  修改layouts/default.vue代码：

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

如果不想要额外的div标签，也可以用<main>这类语义化标签做包裹。

• 关闭Nuxt默认布局过渡
  如果不需要布局切换动画，直接在nuxt.config.ts中关闭默认布局过渡配置即可：

export default defineNuxtConfig({
  app: {
    layoutTransition: false
  }
})

补充排查点 #

如果修改布局后警告仍然存在，可针对性检查两个位置：

• 页面级组件是否存在多根节点、根节点直接为纯文本/注释的情况
• 若使用了NuxtLoadingIndicator等内置加载组件，确认其没有作为多根结构的直接子节点存在

内容的提问来源于stack exchange，提问作者Muhammad Mahmoud