From f75d0dfd47e6a7407245c9a730cdbf40ba8b1c10 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 3 Aug 2022 11:38:46 +0100
Subject: [PATCH] fix(nuxt): extract component to provide route (#6325)

---
 packages/nuxt/src/pages/runtime/page.ts | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/packages/nuxt/src/pages/runtime/page.ts b/packages/nuxt/src/pages/runtime/page.ts
index ffd653097f..f46a34a593 100644
--- a/packages/nuxt/src/pages/runtime/page.ts
+++ b/packages/nuxt/src/pages/runtime/page.ts
@@ -33,23 +33,14 @@ export default defineComponent({
         default: (routeProps: RouterViewSlotProps) => {
           if (!routeProps.Component) { return }
 
-          const Component = defineComponent({
-            setup () {
-              provide('_route', routeProps.route)
-              return () => h(routeProps.Component, {
-                key: generateRouteKey(props.pageKey, routeProps)
-              } as {})
-            }
-          })
-
           return _wrapIf(Transition, routeProps.route.meta.pageTransition ?? defaultPageTransition,
             wrapInKeepAlive(routeProps.route.meta.keepalive, isNested && nuxtApp.isHydrating
             // Include route children in parent suspense
-              ? h(Component)
+              ? h(Component, { key: generateRouteKey(props.pageKey, routeProps), routeProps } as {})
               : h(Suspense, {
                 onPending: () => nuxtApp.callHook('page:start', routeProps.Component),
                 onResolve: () => nuxtApp.callHook('page:finish', routeProps.Component)
-              }, { default: () => h(Component) })
+              }, { default: () => h(Component, { key: generateRouteKey(props.pageKey, routeProps), routeProps } as {}) })
             )).default()
         }
       })
@@ -63,3 +54,11 @@ export default defineComponent({
 }>
 
 const defaultPageTransition = { name: 'page', mode: 'out-in' }
+
+const Component = defineComponent({
+  props: ['routeProps'],
+  setup (props) {
+    provide('_route', props.routeProps.route)
+    return () => h(props.routeProps.Component)
+  }
+})