From 6725fb66fe1981c7c7c4b23bda0df68119b505aa Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Wed, 3 Aug 2022 11:06:18 +0100 Subject: [PATCH 1/2] fix(nuxt): provide route inline --- packages/nuxt/src/pages/runtime/page.ts | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/packages/nuxt/src/pages/runtime/page.ts b/packages/nuxt/src/pages/runtime/page.ts index ffd653097f8..ee539564e5a 100644 --- a/packages/nuxt/src/pages/runtime/page.ts +++ b/packages/nuxt/src/pages/runtime/page.ts @@ -32,24 +32,16 @@ export default defineComponent({ return h(RouterView, { name: props.name, route: props.route, ...attrs }, { 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 {}) - } - }) + provide('_route', routeProps.route) 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(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(Component) }) + }, { default: () => h(routeProps.Component, { key: generateRouteKey(props.pageKey, routeProps) } as {}) }) )).default() } }) From 7774546800aec1bb6b89c05b2c0e5c223041f2b8 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Wed, 3 Aug 2022 11:24:01 +0100 Subject: [PATCH 2/2] fix: extract component --- packages/nuxt/src/pages/runtime/page.ts | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/nuxt/src/pages/runtime/page.ts b/packages/nuxt/src/pages/runtime/page.ts index ee539564e5a..f46a34a593e 100644 --- a/packages/nuxt/src/pages/runtime/page.ts +++ b/packages/nuxt/src/pages/runtime/page.ts @@ -32,16 +32,15 @@ export default defineComponent({ return h(RouterView, { name: props.name, route: props.route, ...attrs }, { default: (routeProps: RouterViewSlotProps) => { if (!routeProps.Component) { return } - provide('_route', routeProps.route) return _wrapIf(Transition, routeProps.route.meta.pageTransition ?? defaultPageTransition, wrapInKeepAlive(routeProps.route.meta.keepalive, isNested && nuxtApp.isHydrating // Include route children in parent suspense - ? h(routeProps.Component, { key: generateRouteKey(props.pageKey, routeProps) } as {}) + ? 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(routeProps.Component, { key: generateRouteKey(props.pageKey, routeProps) } as {}) }) + }, { default: () => h(Component, { key: generateRouteKey(props.pageKey, routeProps), routeProps } as {}) }) )).default() } }) @@ -55,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) + } +})