Vue3ではrootに複数の要素OKだけどNuxt3のpage配下は単一要素がいい

Vue3ではFragmentsが導入されて、マルチルートノードコンポーネントがサポートされた。
・Fragments | Vue.js

以下のようなのも対応しているけど、

<!-- pages/index.vue -->
<template>
  <button class="btn mx-2">ボタン1</button>
  <button class="btn btn-primary mx-2">ボタン2</button>
</template>

Nuxt3のpagesだと、warningが出てしまう。。

runtime-core.esm-bundler.js:38 [Vue warn]: Component inside <Transition> renders non-element root node that cannot be animated. 
  at <Parts onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > key="/parts" > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="page" mode="out-in" > 
  at <RouterView > 
  at <NuxtPage> 
  at <NavDrawer> 
  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>

マルチルートノードコンポーネントがサポートされたけど、<Transition>直下はダメらしい。。
・Enter & Leave トランジション | Vue.js

Nuxtでは、pages配下やlayoutsだと、
<Transition name="page" mode="out-in" >や
<Transition name="layout" mode="out-in" >が、
追加されてページやレイアウトが変わったときにアニメーションをつけてくれる。

なので、Nuxt3のpages配下だと、表示はできるけど、
アニメーションされなくなってしまう。。

なので、pages配下は、今まで通り、単一要素になるようにする必要がある。

<!-- pages/index.vue -->
<template>
  <div>
    <button class="btn mx-2">ボタン1</button>
    <button class="btn btn-primary mx-2">ボタン2</button>
  </div>
</template>

以上!!

参考にしたサイト様

• Nuxt 3 - Layouts directory