diff --git a/packages/nuxt3/src/pages/runtime/page.ts b/packages/nuxt3/src/pages/runtime/page.ts index c51c58f985..8288b7fb59 100644 --- a/packages/nuxt3/src/pages/runtime/page.ts +++ b/packages/nuxt3/src/pages/runtime/page.ts @@ -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 { generateRouteKey, RouterViewSlotProps, wrapInKeepAlive } from './utils' import { useNuxtApp } from '#app' import { _wrapIf } from '#app/components/utils' +const isNestedKey = Symbol('isNested') + export default defineComponent({ name: 'NuxtPage', props: { @@ -16,14 +18,22 @@ export default defineComponent({ setup (props) { const nuxtApp = useNuxtApp() + const isNested = inject(isNestedKey, false) + provide(isNestedKey, true) + return () => { return h(RouterView, {}, { default: (routeProps: RouterViewSlotProps) => routeProps.Component && _wrapIf(Transition, routeProps.route.meta.pageTransition ?? defaultPageTransition, - wrapInKeepAlive(routeProps.route.meta.keepalive, h(Suspense, { - onPending: () => nuxtApp.callHook('page:start', routeProps.Component), - onResolve: () => nuxtApp.callHook('page:finish', routeProps.Component) - }, { default: () => h(routeProps.Component, { key: generateRouteKey(props.pageKey, routeProps) } as {}) }))).default() + 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), + onResolve: () => nuxtApp.callHook('page:finish', routeProps.Component) + }, { default: () => h(routeProps.Component, { key: generateRouteKey(props.pageKey, routeProps) } as {}) }) + )).default() }) } }