fix: allow disabling transition

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

@@ -181,4 +181,4 @@ You can define the layout used to render the route. This can be either false (to
 
 #### `transition`
 
-You can define transition properties for the `<transition>` component that wraps your pages. [More about transitions](https://v3.vuejs.org/guide/transitions-overview.html).
+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).

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

@@ -12,10 +12,10 @@ export const useRoute = () => {
 
 export interface PageMeta {
   [key: string]: any
-  transition?: TransitionProps
+  transition?: false | TransitionProps
   layout?: false | string | Ref<false | string> | ComputedRef<false | string>
   // TODO: https://github.com/vuejs/vue-next/issues/3652
-  // keepalive?: KeepAliveProps
+  // keepalive?: false | KeepAliveProps
 }
 
 declare module 'vue-router' {

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

@@ -1,25 +1,34 @@
 <template>
   <RouterView v-slot="{ Component, route }">
     <NuxtLayout v-if="Component" :name="layout || route.meta.layout">
-      <transition v-bind="route.meta.transition || { name: 'page', mode: 'out-in' }">
-        <!-- <keep-alive> -->
+      <NuxtTransition :options="route.meta.transition ?? { name: 'page', mode: 'out-in' }">
         <Suspense @pending="() => onSuspensePending(Component)" @resolve="() => onSuspenseResolved(Component)">
-          <component :is="Component" :key="$route.path" />
+          <component :is="Component" :key="route.path" />
         </Suspense>
-        <!-- <keep-alive -->
-      </transition>
+      </NuxtTransition>
     </NuxtLayout>
     <!-- TODO: Handle 404 placeholder -->
   </RouterView>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent, h, Transition } from 'vue'
 import NuxtLayout from './layout'
 import { useNuxtApp } from '#app'
 
-export default {
+const NuxtTransition = defineComponent({
+  name: 'NuxtTransition',
+  props: {
+    options: [Object, Boolean]
+  },
+  setup (props, { slots }) {
+    return () => props.options ? h(Transition, props.options, slots.default) : slots.default()
+  }
+})
+
+export default defineComponent({
   name: 'NuxtPage',
-  components: { NuxtLayout },
+  components: { NuxtLayout, NuxtTransition },
   props: {
     layout: {
       type: String,
@@ -42,5 +51,5 @@ export default {
       onSuspenseResolved
     }
   }
-}
+})
 </script>