From 639098437351f1669b76df25205190fd8f1e98d0 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Wed, 6 Apr 2022 12:11:21 +0100 Subject: [PATCH 1/3] fix(nuxt3): provide current route within pages context --- packages/nuxt3/src/app/composables/router.ts | 10 ++++++++++ packages/nuxt3/src/pages/runtime/page.ts | 6 ++++-- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/packages/nuxt3/src/app/composables/router.ts b/packages/nuxt3/src/app/composables/router.ts index a2b73237f32..e7a55933134 100644 --- a/packages/nuxt3/src/app/composables/router.ts +++ b/packages/nuxt3/src/app/composables/router.ts @@ -1,12 +1,22 @@ import type { Router, RouteLocationNormalizedLoaded, NavigationGuard, RouteLocationNormalized, RouteLocationRaw, NavigationFailure } from 'vue-router' import { sendRedirect } from 'h3' +import { getCurrentInstance, inject } from 'vue' import { useNuxtApp } from '#app' +export const currentRouteKey = Symbol('currentRoute') + export const useRouter = () => { return useNuxtApp()?.$router as Router } export const useRoute = () => { + const vm = getCurrentInstance() + if (vm) { + const route = inject(currentRouteKey, null) + if (route) { + return route as RouteLocationNormalizedLoaded + } + } return useNuxtApp()._route as RouteLocationNormalizedLoaded } diff --git a/packages/nuxt3/src/pages/runtime/page.ts b/packages/nuxt3/src/pages/runtime/page.ts index c51c58f9853..0411bae080f 100644 --- a/packages/nuxt3/src/pages/runtime/page.ts +++ b/packages/nuxt3/src/pages/runtime/page.ts @@ -1,9 +1,10 @@ -import { defineComponent, h, Suspense, Transition } from 'vue' -import { RouteLocationNormalizedLoaded, RouterView } from 'vue-router' +import { defineComponent, h, provide, Suspense, Transition } from 'vue' +import { RouteLocationNormalizedLoaded, RouterView, useRoute } from 'vue-router' import { generateRouteKey, RouterViewSlotProps, wrapInKeepAlive } from './utils' import { useNuxtApp } from '#app' import { _wrapIf } from '#app/components/utils' +import { currentRouteKey } from '#app/composables/router' export default defineComponent({ name: 'NuxtPage', @@ -15,6 +16,7 @@ export default defineComponent({ }, setup (props) { const nuxtApp = useNuxtApp() + provide(currentRouteKey, useRoute()) return () => { return h(RouterView, {}, { From 5c4557c19239bd57fa283db7405a2d5500b8da43 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Wed, 6 Apr 2022 13:23:47 +0100 Subject: [PATCH 2/3] fix(nuxt3): extract suspended route behaviour to separate `useActiveRoute` composable --- packages/nuxt3/src/app/composables/router.ts | 14 ++++---------- packages/nuxt3/src/pages/runtime/page.ts | 6 ++---- packages/nuxt3/src/pages/runtime/router.ts | 17 ++++++++++++----- 3 files changed, 18 insertions(+), 19 deletions(-) diff --git a/packages/nuxt3/src/app/composables/router.ts b/packages/nuxt3/src/app/composables/router.ts index e7a55933134..efceb629c7f 100644 --- a/packages/nuxt3/src/app/composables/router.ts +++ b/packages/nuxt3/src/app/composables/router.ts @@ -1,25 +1,19 @@ import type { Router, RouteLocationNormalizedLoaded, NavigationGuard, RouteLocationNormalized, RouteLocationRaw, NavigationFailure } from 'vue-router' import { sendRedirect } from 'h3' -import { getCurrentInstance, inject } from 'vue' import { useNuxtApp } from '#app' -export const currentRouteKey = Symbol('currentRoute') - export const useRouter = () => { return useNuxtApp()?.$router as Router } export const useRoute = () => { - const vm = getCurrentInstance() - if (vm) { - const route = inject(currentRouteKey, null) - if (route) { - return route as RouteLocationNormalizedLoaded - } - } return useNuxtApp()._route as RouteLocationNormalizedLoaded } +export const useActiveRoute = () => { + return useNuxtApp()._activeRoute as RouteLocationNormalizedLoaded +} + export interface RouteMiddleware { (to: RouteLocationNormalized, from: RouteLocationNormalized): ReturnType } diff --git a/packages/nuxt3/src/pages/runtime/page.ts b/packages/nuxt3/src/pages/runtime/page.ts index 0411bae080f..c51c58f9853 100644 --- a/packages/nuxt3/src/pages/runtime/page.ts +++ b/packages/nuxt3/src/pages/runtime/page.ts @@ -1,10 +1,9 @@ -import { defineComponent, h, provide, Suspense, Transition } from 'vue' -import { RouteLocationNormalizedLoaded, RouterView, useRoute } from 'vue-router' +import { defineComponent, h, 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' -import { currentRouteKey } from '#app/composables/router' export default defineComponent({ name: 'NuxtPage', @@ -16,7 +15,6 @@ export default defineComponent({ }, setup (props) { const nuxtApp = useNuxtApp() - provide(currentRouteKey, useRoute()) return () => { return h(RouterView, {}, { diff --git a/packages/nuxt3/src/pages/runtime/router.ts b/packages/nuxt3/src/pages/runtime/router.ts index 650ae07fbfb..26160233a57 100644 --- a/packages/nuxt3/src/pages/runtime/router.ts +++ b/packages/nuxt3/src/pages/runtime/router.ts @@ -75,10 +75,16 @@ export default defineNuxtPlugin((nuxtApp) => { get: () => previousRoute.value }) + // https://github.com/vuejs/vue-router-next/blob/master/src/router.ts#L1192-L1200 + const route = {} + for (const key in router.currentRoute.value) { + route[key] = computed(() => router.currentRoute.value[key]) + } + // Allows suspending the route object until page navigation completes const path = process.server ? nuxtApp.ssrContext.req.url : createCurrentLocation(baseURL, window.location) - const currentRoute = shallowRef(router.resolve(path) as RouteLocation) - const syncCurrentRoute = () => { currentRoute.value = router.currentRoute.value } + const _activeRoute = shallowRef(router.resolve(path) as RouteLocation) + const syncCurrentRoute = () => { _activeRoute.value = router.currentRoute.value } nuxtApp.hook('page:finish', syncCurrentRoute) router.afterEach((to, from) => { // We won't trigger suspense if the component is reused between routes @@ -88,12 +94,13 @@ export default defineNuxtPlugin((nuxtApp) => { } }) // https://github.com/vuejs/vue-router-next/blob/master/src/router.ts#L1192-L1200 - const route = {} - for (const key in currentRoute.value) { - route[key] = computed(() => currentRoute.value[key]) + const activeRoute = {} + for (const key in _activeRoute.value) { + activeRoute[key] = computed(() => _activeRoute.value[key]) } nuxtApp._route = reactive(route) + nuxtApp._activeRoute = reactive(activeRoute) nuxtApp._middleware = nuxtApp._middleware || { global: [], From f234ad43964f78ead6a44755303c238782c71f49 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Wed, 6 Apr 2022 13:43:28 +0100 Subject: [PATCH 3/3] fix: add `useActiveRoute` auto-import --- packages/bridge/src/auto-imports.ts | 2 +- packages/nuxt3/src/app/composables/index.ts | 2 +- packages/nuxt3/src/auto-imports/presets.ts | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/bridge/src/auto-imports.ts b/packages/bridge/src/auto-imports.ts index 9ecad332f1e..a53e3836a34 100644 --- a/packages/bridge/src/auto-imports.ts +++ b/packages/bridge/src/auto-imports.ts @@ -4,7 +4,7 @@ import type { Preset } from 'unimport' import autoImports from '../../nuxt3/src/auto-imports/module' import { vuePreset } from '../../nuxt3/src/auto-imports/presets' -const UnsupportedImports = new Set(['useAsyncData', 'useFetch', 'useError', 'throwError', 'clearError', 'defineNuxtLink']) +const UnsupportedImports = new Set(['useAsyncData', 'useFetch', 'useError', 'throwError', 'clearError', 'defineNuxtLink', 'useActiveRoute']) const CapiHelpers = new Set(Object.keys(CompositionApi)) export function setupAutoImports () { diff --git a/packages/nuxt3/src/app/composables/index.ts b/packages/nuxt3/src/app/composables/index.ts index 03300f55334..f5e335fc0a0 100644 --- a/packages/nuxt3/src/app/composables/index.ts +++ b/packages/nuxt3/src/app/composables/index.ts @@ -9,5 +9,5 @@ export type { FetchResult, UseFetchOptions } from './fetch' export { useCookie } from './cookie' export type { CookieOptions, CookieRef } from './cookie' export { useRequestHeaders } from './ssr' -export { abortNavigation, addRouteMiddleware, defineNuxtRouteMiddleware, navigateTo, useRoute, useRouter } from './router' +export { abortNavigation, addRouteMiddleware, defineNuxtRouteMiddleware, navigateTo, useRoute, useActiveRoute, useRouter } from './router' export type { AddRouteMiddlewareOptions, RouteMiddleware } from './router' diff --git a/packages/nuxt3/src/auto-imports/presets.ts b/packages/nuxt3/src/auto-imports/presets.ts index 5e0a0ab1c55..92abf1e29db 100644 --- a/packages/nuxt3/src/auto-imports/presets.ts +++ b/packages/nuxt3/src/auto-imports/presets.ts @@ -36,6 +36,7 @@ export const appPreset = defineUnimportPreset({ 'useRequestHeaders', 'useRouter', 'useRoute', + 'useActiveRoute', 'defineNuxtRouteMiddleware', 'navigateTo', 'abortNavigation',