fix(nuxt3): include route children in parent suspense (#4422)

This commit is contained in:
Daniel Roe 2022-04-19 09:38:57 +01:00 committed by GitHub
parent ce38dcba1c
commit 7a316c289a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,10 +1,12 @@
import { defineComponent, h, Suspense, Transition } from 'vue' import { defineComponent, h, inject, provide, Suspense, Transition } from 'vue'
import { RouteLocationNormalizedLoaded, RouterView } from 'vue-router' import { RouteLocationNormalizedLoaded, RouterView } from 'vue-router'
import { generateRouteKey, RouterViewSlotProps, wrapInKeepAlive } from './utils' import { generateRouteKey, RouterViewSlotProps, wrapInKeepAlive } from './utils'
import { useNuxtApp } from '#app' import { useNuxtApp } from '#app'
import { _wrapIf } from '#app/components/utils' import { _wrapIf } from '#app/components/utils'
const isNestedKey = Symbol('isNested')
export default defineComponent({ export default defineComponent({
name: 'NuxtPage', name: 'NuxtPage',
props: { props: {
@ -16,14 +18,22 @@ export default defineComponent({
setup (props) { setup (props) {
const nuxtApp = useNuxtApp() const nuxtApp = useNuxtApp()
const isNested = inject(isNestedKey, false)
provide(isNestedKey, true)
return () => { return () => {
return h(RouterView, {}, { return h(RouterView, {}, {
default: (routeProps: RouterViewSlotProps) => routeProps.Component && default: (routeProps: RouterViewSlotProps) => routeProps.Component &&
_wrapIf(Transition, routeProps.route.meta.pageTransition ?? defaultPageTransition, _wrapIf(Transition, routeProps.route.meta.pageTransition ?? defaultPageTransition,
wrapInKeepAlive(routeProps.route.meta.keepalive, h(Suspense, { wrapInKeepAlive(routeProps.route.meta.keepalive,
isNested
// Include route children in parent suspense
? h(routeProps.Component, { key: generateRouteKey(props.pageKey, routeProps) } as {})
: h(Suspense, {
onPending: () => nuxtApp.callHook('page:start', routeProps.Component), onPending: () => nuxtApp.callHook('page:start', routeProps.Component),
onResolve: () => nuxtApp.callHook('page:finish', routeProps.Component) onResolve: () => nuxtApp.callHook('page:finish', routeProps.Component)
}, { default: () => h(routeProps.Component, { key: generateRouteKey(props.pageKey, routeProps) } as {}) }))).default() }, { default: () => h(routeProps.Component, { key: generateRouteKey(props.pageKey, routeProps) } as {}) })
)).default()
}) })
} }
} }