feat(nuxt): allow passing transition & keepalive props to <NuxtPage> (#7492)

This commit is contained in:
Daniel Roe 2022-09-14 11:34:16 +01:00 committed by GitHub
parent ee75b48526
commit 5d79ed5f9e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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 type { DefineComponent, VNode } from 'vue'
import { RouteLocationNormalized, RouteLocationNormalizedLoaded, RouterView } from 'vue-router' import { RouteLocationNormalized, RouteLocationNormalizedLoaded, RouterView } from 'vue-router'
import type { RouteLocation } from 'vue-router' import type { RouteLocation } from 'vue-router'
@ -18,6 +18,14 @@ export default defineComponent({
name: { name: {
type: String 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: { route: {
type: Object as () => RouteLocationNormalized type: Object as () => RouteLocationNormalized
}, },
@ -38,10 +46,10 @@ export default defineComponent({
if (!routeProps.Component) { return } if (!routeProps.Component) { return }
const key = generateRouteKey(props.pageKey, routeProps) 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, 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 // Include route children in parent suspense
? h(Component, { key, routeProps, pageKey: key, hasTransition: !!transitionProps } as {}) ? h(Component, { key, routeProps, pageKey: key, hasTransition: !!transitionProps } as {})
: h(Suspense, { : h(Suspense, {