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

Author: danielroe

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()
       })
     }
   }