feat: route resolution enhancement

Author: BobbieGoede

src/constants.ts

@@ -29,7 +29,8 @@ export const DEFAULT_OPTIONS = {
     localeDetector: '',
     typedPages: true,
     typedOptionsAndMessages: false,
-    alternateLinkCanonicalQueries: true
+    alternateLinkCanonicalQueries: true,
+    routeResolutionEnhancement: false as false | 'explicit' | 'implicit'
   },
   bundle: {
     compositionOnly: true,

src/gen.ts

@@ -196,7 +196,7 @@ declare global {
 
   // prettier-ignore
   return `// Generated by @nuxtjs/i18n
-import type { ${i18nType} } from 'vue-i18n'
+import type { ${i18nType}, Locale } from 'vue-i18n'
 import type { ComposerCustomProperties } from '${relative(
     join(nuxt.options.buildDir, 'types'),
     resolve(runtimeDir, 'types.ts')
@@ -228,6 +228,21 @@ declare module '#app' {
 
 ${typedRouterAugmentations}
 
+declare module 'vue-router' {
+  interface Router {
+    resolve<Name extends keyof RouteMap = keyof RouteMap>(
+      to: RouteLocationAsRelativeTyped<RouteMap, Name>,
+      currentLocation?: RouteLocationNormalizedLoaded,
+      options?: { locale?: Locale | boolean }
+    ): RouteLocationResolved<Name>
+    resolve(
+      to: RouteLocationAsString | RouteLocationAsRelative | RouteLocationAsPath,
+      currentLocation?: RouteLocationNormalizedLoaded,
+      options?: { locale?: Locale | boolean }
+    ): RouteLocationResolved
+  }
+}
+
 ${(options.autoDeclare && globalTranslationTypes) || ''}
 
 export {}`

src/prepare/runtime.ts

@@ -9,6 +9,7 @@ export function prepareRuntime(ctx: I18nNuxtContext, nuxt: Nuxt) {
   const { options, resolver } = ctx
   // for core plugin
   addPlugin(resolver.resolve('./runtime/plugins/i18n'))
+  addPlugin(resolver.resolve('./runtime/plugins/route-resolution-enhancement'))
   addPlugin(resolver.resolve('./runtime/plugins/route-locale-detect'))
   addPlugin(resolver.resolve('./runtime/plugins/ssg-detect'))
   addPlugin(resolver.resolve('./runtime/plugins/switch-locale-path-ssr'))

src/runtime/components/NuxtLinkLocale.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import { isObject } from '@intlify/shared'
-import { useLocalePath, type Locale } from '#i18n'
+import { useLocaleRoute, type Locale } from '#i18n'
 import { defineComponent, computed, h } from 'vue'
 import { defineNuxtLink } from '#imports'
 import { hasProtocol } from 'ufo'
@@ -28,7 +28,7 @@ export default defineComponent<NuxtLinkLocaleProps>({
     }
   },
   setup(props, { slots }) {
-    const localePath = useLocalePath()
+    const localeRoute = useLocaleRoute()
 
     // From https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/components/nuxt-link.ts#L57
     const checkPropConflicts = (
@@ -43,7 +43,7 @@ export default defineComponent<NuxtLinkLocaleProps>({
 
     const resolvedPath = computed(() => {
       const destination = props.to ?? props.href
-      return (destination != null ? localePath(destination, props.locale) : destination) as string
+      return destination != null ? localeRoute(destination, props.locale) : destination
     })
 
     // Resolving link type
@@ -77,6 +77,7 @@ export default defineComponent<NuxtLinkLocaleProps>({
       }
 
       if (!isExternal.value) {
+        // @ts-expect-error type needs to expanded to allow route objects/paths as NuxtLinkProps
         _props.to = resolvedPath.value
       }
 

src/runtime/plugins/route-resolution-enhancement.ts

@@ -0,0 +1,43 @@
+import { defineNuxtPlugin } from '#imports'
+import type { Locale } from 'vue-i18n'
+import { resolveRoute } from '../routing/routing'
+import { useNuxtApp } from 'nuxt/app'
+import { useRouter } from 'vue-router'
+import type { I18nPublicRuntimeConfig } from '#internal-i18n-types'
+
+type ResolverParams = Parameters<import('#vue-router').Router['resolve']>
+
+export default defineNuxtPlugin({
+  name: 'i18n:route-resolution-enhancement',
+  dependsOn: ['i18n:plugin'],
+  setup() {
+    const nuxt = useNuxtApp()
+    const runtimeI18n = nuxt.$config.public.i18n as I18nPublicRuntimeConfig
+
+    if (!runtimeI18n.experimental.routeResolutionEnhancement) return
+
+    const router = useRouter()
+    const implicit = runtimeI18n.experimental.routeResolutionEnhancement === 'implicit'
+
+    const originalResolve = router.resolve.bind(router)
+    router.resolve = (
+      to: ResolverParams[0],
+      currentLocation: ResolverParams[1],
+      options?: { locale?: Locale | boolean }
+    ) => {
+      /**
+       * disable enhancement
+       * - explicit mode without `locale`
+       * - implicit mode with `locale: false`
+       */
+      if ((!implicit && options?.locale == null) || options?.locale === false) {
+        return originalResolve(to, currentLocation)
+      }
+
+      // resolve to string | undefined
+      const _locale = (typeof options?.locale === 'string' && options?.locale) || undefined
+      console.log(_locale)
+      return resolveRoute(nuxt._nuxtI18n, to, _locale ?? nuxt._nuxtI18n.getLocale())
+    }
+  }
+})

src/runtime/routing/routing.ts

@@ -54,21 +54,21 @@ function normalizeRawLocation(route: RouteLocationRaw): RouteLike {
 }
 
 /**
- * Try resolving route and throw on failure
+ * Resolve route, throws on failure
  */
-function resolveRoute(ctx: ComposableContext, route: RouteLocationRaw, locale: Locale) {
+export function resolveRoute(ctx: ComposableContext, route: RouteLocationRaw, locale: Locale) {
   const normalized = normalizeRawLocation(route)
-  const resolved = ctx.router.resolve(ctx.resolveLocalizedRouteObject(normalized, locale))
+  const resolved = ctx.router.resolve(ctx.resolveLocalizedRouteObject(normalized, locale), undefined, { locale: false })
   if (resolved.name) {
     return resolved
   }
 
   // if unable to resolve route try resolving route based on original input
-  return ctx.router.resolve(route)
+  return ctx.router.resolve(route, undefined, { locale: false })
 }
 
 /**
- * Try resolving route and return undefined on failure
+ * Resolve route, returns undefined on failure
  */
 function tryResolveRoute(ctx: ComposableContext, route: RouteLocationRaw, locale: Locale = ctx.getLocale()) {
   try {

src/types.ts

@@ -86,6 +86,16 @@ export interface ExperimentalFeatures {
    * @default true
    */
   alternateLinkCanonicalQueries?: boolean
+
+  /**
+   * Enhance Vue Router's route resolution with localization
+   *
+   * @defaultValue `false`
+   *
+   * @remark `'explicit'` - resolve localized routes when passing `{ locale: Locale | true }` as third argument to router.resolve.
+   * @remark `'implicit'` - resolve localized routes by default
+   */
+  routeResolutionEnhancement?: false | 'explicit' | 'implicit'
 }
 
 export interface BundleOptions