feat(nuxt3): add support for `<KeepAlive>` (#2904)

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

@@ -1,4 +1,4 @@
-import { ComputedRef, /* KeepAliveProps, */ Ref, TransitionProps } from 'vue'
+import { ComputedRef, KeepAliveProps, Ref, TransitionProps } from 'vue'
 import type { Router, RouteLocationNormalizedLoaded, NavigationGuard, RouteLocationNormalized, RouteLocationRaw } from 'vue-router'
 import { useNuxtApp } from '#app'
 
@@ -16,8 +16,7 @@ export interface PageMeta {
   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
-  // keepalive?: false | KeepAliveProps
+  keepalive?: false | KeepAliveProps
 }
 
 declare module 'vue-router' {

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

@@ -0,0 +1,51 @@
+import { Component, defineComponent, KeepAlive, h, Suspense, Transition } from 'vue'
+import { RouterView, useRoute } from 'vue-router'
+import NuxtLayout from './layout'
+import { useNuxtApp } from '#app'
+// @ts-ignore
+import layouts from '#build/layouts'
+
+type InstanceOf<T> = T extends new (...args: any[]) => infer R ? R : never
+type RouterViewSlotProps = Parameters<InstanceOf<typeof RouterView>['$slots']['default']>[0]
+
+export default defineComponent({
+  name: 'NuxtPage',
+  props: {
+    layout: {
+      type: String,
+      default: null
+    }
+  },
+  setup (props) {
+    const nuxtApp = useNuxtApp()
+    const route = useRoute()
+
+    return () => {
+      // We avoid rendering layout transition if there is no layout to render
+      const hasLayout = props.layout ?? route.meta.layout ?? 'default' in layouts
+
+      return h(RouterView, {}, {
+        default: ({ Component }: RouterViewSlotProps) => Component && wrapIf(Transition, hasLayout && (route.meta.layoutTransition ?? defaultLayoutTransition), {
+          default: () => wrapIf(NuxtLayout, hasLayout && { layout: props.layout ?? route.meta.layout }, {
+            default: () => wrapIf(Transition, route.meta.pageTransition ?? defaultPageTransition, {
+              default: () => wrapIf(KeepAlive, process.client && route.meta.keepalive, h(Suspense, {
+                onPending: () => nuxtApp.callHook('page:start', Component),
+                onResolve: () => nuxtApp.callHook('page:finish', Component)
+              }, { default: () => h(Component) }))
+            })
+          })
+        })
+      })
+    }
+  }
+})
+
+const wrapIf = (component: Component, props: any, slotsOrChildren: any) => {
+  if (props) {
+    return h(component, props === true ? {} : props, slotsOrChildren)
+  }
+  return slotsOrChildren.default?.() || slotsOrChildren
+}
+
+const defaultLayoutTransition = { name: 'layout', mode: 'out-in' }
+const defaultPageTransition = { name: 'page', mode: 'out-in' }

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

@@ -1,57 +0,0 @@
-<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.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>
-
-<script lang="ts">
-import { defineComponent, h, Transition } from 'vue'
-import NuxtLayout from './layout'
-import { useNuxtApp } from '#app'
-
-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, NuxtTransition },
-  props: {
-    layout: {
-      type: String,
-      default: null
-    }
-  },
-  setup () {
-    const nuxtApp = useNuxtApp()
-
-    function onSuspensePending (Component) {
-      return nuxtApp.callHook('page:start', Component)
-    }
-
-    function onSuspenseResolved (Component) {
-      return nuxtApp.callHook('page:finish', Component)
-    }
-
-    return {
-      onSuspensePending,
-      onSuspenseResolved
-    }
-  }
-})
-</script>

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

@@ -7,7 +7,7 @@ import {
   NavigationGuard
 } from 'vue-router'
 import NuxtNestedPage from './nested-page.vue'
-import NuxtPage from './page.vue'
+import NuxtPage from './page'
 import NuxtLayout from './layout'
 import { callWithNuxt, defineNuxtPlugin, useRuntimeConfig } from '#app'
 // @ts-ignore