Nuxt3 - [Vue警告]：<Transition>中的组件呈现不能动画的非元素根节点。

Question

我收到了这两条警告：

​

​

我验证了所有组件、页面和布局都有一个根元素。

布局：

default.vue

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

main.vue

<template>
  <div class="relative">
    <NavBarTop class="sticky top-0 z-40" />
    <!-- Content -->
    <div class="container mx-auto lg:mt-5">
      <div class="grid grid-cols-12 lg:px-8 p-3.5 mx-auto lg:gap-x-9">
        <!-- left column -->
        <div class="col-span-12 lg:block lg:col-span-3 place-items-start">
          <NavMain class="hidden lg:flex" />
          <slot name="left-column"></slot>
        </div>
        <!-- Center -->
        <div class="col-span-12 lg:col-span-6">
          <slot name="content"></slot>
        </div>
        <!-- right- -->
        <div class="order-first col-span-12 lg:col-span-3 lg:order-none">
          <slot name="right-column"></slot>
        </div>
      </div>
      <slot />
    </div>
  </div>
</template>

app.vue

<template>
  <div class="font-inter">
    <ToastNotification />
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

在<NuxtLayout>之前，这个应用程序“工作”就像预期的那样。<ToastNotification>在DOM中，而在body标记中没有其他内容。

package.json

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
     ...
    "nuxt": "3.0.0-rc.9",
     ...
  },
  "dependencies": {
   ...

    "nuxt3": "^3.0.1-rc.0-27821553.ab125bd",
   ...

  }
}

Answer 1

OP通过使用最新稳定的3.0版本Nuxt解决了这个问题。