diff --git a/packages/nuxt/src/app/plugins/router.ts b/packages/nuxt/src/app/plugins/router.ts index b12c829c15..15ab8d866c 100644 --- a/packages/nuxt/src/app/plugins/router.ts +++ b/packages/nuxt/src/app/plugins/router.ts @@ -1,4 +1,5 @@ -import { defineComponent, h, isReadonly, reactive } from 'vue' +import type { Ref } from 'vue' +import { computed, defineComponent, h, isReadonly, reactive } from 'vue' import { isEqual, joinURL, parseQuery, parseURL, stringifyParsedURL, stringifyQuery, withoutBase } from 'ufo' import { createError } from 'h3' import { defineNuxtPlugin, useRuntimeConfig } from '../nuxt' @@ -71,7 +72,7 @@ interface RouterHooks { } interface Router { - currentRoute: Route + currentRoute: Ref isReady: () => Promise options: {} install: () => Promise @@ -158,8 +159,21 @@ export default defineNuxtPlugin<{ route: Route, router: Router }>({ } } + const currentRoute = computed(() => route) + // TODO: remove this in v3.10 + for (const key in route) { + Object.defineProperty(currentRoute, key, { + get () { + if (import.meta.dev) { + console.warn(`\`currentRoute.${key}\` is deprecated. Use \`currentRoute.value.${key}\` instead.`) + } + return route[key as keyof Route] + } + }) + } + const router: Router = { - currentRoute: route, + currentRoute, isReady: () => Promise.resolve(), // These options provide a similar API to vue-router but have no effect options: {},