Nuxt App [Vue 警告]：內部組件<Transition>渲染不能動畫的非元素根節點

Question

我正在使用 Nuxt 3 開發一個項目，並且在控制台中不斷收到此警告

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

我還沒有過渡，但我認為它來自 nuxt spinner。

layouts/default.vue ：

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

我檢查了我所有的頁面和組件，它們都只有以下的一個根元素（ header 、 nav 、 div 、 form 、 NuxtLink 、 button 、 img ）

警告沒有指定它來自哪里，我不知道如何調試它。

Answer 1

在 nuxt 3 中，一切都應該只有 1 個根元素：

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

如果您遇到問題，只需閱讀文檔： https ://v3.nuxtjs.org/guide/directory-structure/layouts

Answer 2

如果轉換不在您的代碼中，我會簡單地忽略警告。 正如警告所述，它只會導致該特定組件的動畫無效。 我不會花任何時間來調試它，因為您的代碼不會受到影響。

編輯：如果你真的想調試這個，最簡單的方法是使用 Vue 開發工具來搜索轉換。