feat(nuxt3)!: support layout transitions (#2861)

* feat(nuxt3): support layout transitions

* docs: update

docs/content/3.docs/2.directory-structure/9.pages.md

@@ -206,6 +206,6 @@ Of course, you are welcome to define metadata for your own use throughout your a
 
 You can define the layout used to render the route. This can be either false (to disable any layout), a string or a ref/computed, if you want to make it reactive in some way. [More about layouts](/docs/directory-structure/layouts).
 
-#### `transition`
+#### `layoutTransition` and `pageTransition`
 
-You can define transition properties for the `<transition>` component that wraps your pages, or pass `false` to disable the `<transition>` wrapper for that route. [More about transitions](https://v3.vuejs.org/guide/transitions-overview.html).
+You can define transition properties for the `<transition>` components that wraps your pages and layouts, or pass `false` to disable the `<transition>` wrapper for that route. [More about transitions](https://v3.vuejs.org/guide/transitions-overview.html).

packages/nuxt3/src/pages/runtime/composables.ts

@@ -12,7 +12,8 @@ export const useRoute = () => {
 
 export interface PageMeta {
   [key: string]: any
-  transition?: false | TransitionProps
+  pageTransition?: false | TransitionProps
+  layoutTransition?: false | TransitionProps
   layout?: false | string | Ref<false | string> | ComputedRef<false | string>
   key?: string | ((route: RouteLocationNormalizedLoaded) => string)
   // TODO: https://github.com/vuejs/vue-next/issues/3652

packages/nuxt3/src/pages/runtime/page.vue

@@ -1,12 +1,14 @@
 <template>
   <RouterView v-slot="{ Component, route }">
+    <NuxtTransition :options="route.meta.layoutTransition ?? { name: 'layout', mode: 'out-in' }">
       <NuxtLayout v-if="Component" :name="layout || route.meta.layout">
-      <NuxtTransition :options="route.meta.transition ?? { name: 'page', mode: 'out-in' }">
+        <NuxtTransition :options="route.meta.pageTransition ?? { name: 'page', mode: 'out-in' }">
           <Suspense @pending="() => onSuspensePending(Component)" @resolve="() => onSuspenseResolved(Component)">
             <component :is="Component" />
           </Suspense>
         </NuxtTransition>
       </NuxtLayout>
+    </NuxtTransition>
     <!-- TODO: Handle 404 placeholder -->
   </RouterView>
 </template>