diff --git a/packages/nuxt/src/pages/runtime/page.ts b/packages/nuxt/src/pages/runtime/page.ts index 1c6e43f071..1254b8a43d 100644 --- a/packages/nuxt/src/pages/runtime/page.ts +++ b/packages/nuxt/src/pages/runtime/page.ts @@ -1,4 +1,4 @@ -import { computed, defineComponent, h, inject, provide, reactive, onMounted, nextTick, Suspense, Transition } from 'vue' +import { computed, defineComponent, h, inject, provide, reactive, onMounted, nextTick, Suspense, Transition, KeepAliveProps, TransitionProps } from 'vue' import type { DefineComponent, VNode } from 'vue' import { RouteLocationNormalized, RouteLocationNormalizedLoaded, RouterView } from 'vue-router' import type { RouteLocation } from 'vue-router' @@ -18,6 +18,14 @@ export default defineComponent({ name: { type: String }, + transition: { + type: [Boolean, Object] as any as () => boolean | TransitionProps, + default: undefined + }, + keepalive: { + type: [Boolean, Object] as any as () => boolean | KeepAliveProps, + default: undefined + }, route: { type: Object as () => RouteLocationNormalized }, @@ -38,10 +46,10 @@ export default defineComponent({ if (!routeProps.Component) { return } const key = generateRouteKey(props.pageKey, routeProps) - const transitionProps = routeProps.route.meta.pageTransition ?? defaultPageTransition + const transitionProps = props.transition ?? routeProps.route.meta.pageTransition ?? (defaultPageTransition as TransitionProps) return _wrapIf(Transition, transitionProps, - wrapInKeepAlive(routeProps.route.meta.keepalive ?? defaultKeepaliveConfig, isNested && nuxtApp.isHydrating + wrapInKeepAlive(props.keepalive ?? routeProps.route.meta.keepalive ?? (defaultKeepaliveConfig as KeepAliveProps), isNested && nuxtApp.isHydrating // Include route children in parent suspense ? h(Component, { key, routeProps, pageKey: key, hasTransition: !!transitionProps } as {}) : h(Suspense, {