feat: accept route name argument getRouteBaseName (#3446)

Author: BobbieGoede

docs/content/docs/04.api/05.vue.md

@@ -12,7 +12,7 @@ The APIs listed are available in the Options API. They are kept for Nuxt2 to mig
 ### `getRouteBaseName()`{lang="ts"}
 
 - **Arguments**:
-  - route (type: `Route`{lang="ts-type"}, default: current route)
+  - route (type: `string | Route`{lang="ts-type"}, default: current route)
 - **Returns**: `string`{lang="ts-type"}
 
 Returns base name of the passed route (uses the current route by default). The base name of a route is its name without a locale suffix or other metadata added by `@nuxtjs/i18n`.

docs/content/docs/06.composables/06.use-route-base-name.md

@@ -9,7 +9,7 @@ The `useRouteBaseName()`{lang="ts"} composable returns a function that gets the
 ```ts
 declare function useRouteBaseName(
   options?: I18nCommonRoutingOptionsWithComposable
-): (givenRoute?: Route | RouteLocationNormalizedLoaded) => string | undefined
+): (givenRoute?: string | Route | RouteLocationNormalizedLoaded) => string | undefined
 ```
 
 ## Usage
@@ -18,9 +18,9 @@ declare function useRouteBaseName(
 <script setup>
 const route = useRoute()
 const getRouteBaseName = useRouteBaseName()
-const baseRouteName = computed(() => {
-  return getRouteBaseName(route)
-})
+const baseRouteName = computed(() => getRouteBaseName(route))
+// or
+const baseRouteNameString = computed(() => getRouteBaseName(route.name))
 </script>
 
 <template>

specs/basic_usage.spec.ts

@@ -110,6 +110,7 @@ describe('basic usage', async () => {
     const { page } = await renderPage('/nuxt-context-extension')
 
     expect(await getText(page, '#get-route-base-name')).toEqual('nuxt-context-extension')
+    expect(await getText(page, '#get-route-base-name-string')).toEqual('nuxt-context-extension')
     expect(await getText(page, '#switch-locale-path')).toEqual('/ja/nuxt-context-extension')
     expect(await getText(page, '#locale-path')).toEqual('/nl/nuxt-context-extension')
 

specs/basic_usage_compat_4.spec.ts

@@ -110,6 +110,7 @@ describe('basic usage - compatibilityVersion: 4', async () => {
     const { page } = await renderPage('/nuxt-context-extension')
 
     expect(await getText(page, '#get-route-base-name')).toEqual('nuxt-context-extension')
+    expect(await getText(page, '#get-route-base-name-string')).toEqual('nuxt-context-extension')
     expect(await getText(page, '#switch-locale-path')).toEqual('/ja/nuxt-context-extension')
     expect(await getText(page, '#locale-path')).toEqual('/nl/nuxt-context-extension')
 

specs/fixtures/basic_usage/pages/nuxt-context-extension.vue

@@ -3,6 +3,7 @@
 <template>
   <div>
     <p id="get-route-base-name">{{ $nuxt.$getRouteBaseName($route) }}</p>
+    <p id="get-route-base-name-string">{{ $nuxt.$getRouteBaseName($route.name) }}</p>
     <p id="switch-locale-path">{{ $nuxt.$switchLocalePath('ja') }}</p>
     <p id="locale-path">{{ $nuxt.$localePath('nuxt-context-extension', 'nl') }}</p>
     <p id="locale-route">{{ JSON.stringify($nuxt.$localeRoute()) }}</p>

specs/fixtures/basic_usage_compat_4/app/pages/nuxt-context-extension.vue

@@ -3,6 +3,7 @@
 <template>
   <div>
     <p id="get-route-base-name">{{ $nuxt.$getRouteBaseName($route) }}</p>
+    <p id="get-route-base-name-string">{{ $nuxt.$getRouteBaseName($route.name) }}</p>
     <p id="switch-locale-path">{{ $nuxt.$switchLocalePath('ja') }}</p>
     <p id="locale-path">{{ $nuxt.$localePath('nuxt-context-extension', 'nl') }}</p>
     <p id="locale-route">{{ JSON.stringify($nuxt.$localeRoute()) }}</p>

src/runtime/composables/index.ts

@@ -20,7 +20,14 @@ import type { Ref } from 'vue'
 import type { Locale } from 'vue-i18n'
 import type { resolveRoute } from '../routing/routing'
 import type { I18nHeadMetaInfo, I18nHeadOptions, SeoAttributesOptions } from '#internal-i18n-types'
-import type { RouteLocationAsRelativeI18n, RouteLocationRaw, RouteLocationResolvedI18n, RouteMapI18n } from 'vue-router'
+import type {
+  RouteLocationAsRelativeI18n,
+  RouteLocationRaw,
+  RouteLocationResolvedI18n,
+  RouteMap,
+  RouteMapI18n
+} from 'vue-router'
+import type { RouteLocationGenericPath } from '../types'
 
 export * from 'vue-i18n'
 export * from './shared'
@@ -189,15 +196,14 @@ export type ResolveRouteFunction = (route: RouteLocationRaw, locale?: Locale) =>
  *
  * @returns Route base name (without localization suffix) or `undefined` if no name was found.
  */
-export type RouteBaseNameFunction = <Name extends keyof RouteMapI18n = keyof RouteMapI18n>(
-  route: Name | RouteLocationI18nGenericPath
+export type RouteBaseNameFunction = <Name extends keyof RouteMap = keyof RouteMap>(
+  route: Name | RouteLocationGenericPath
 ) => string | undefined
 
 /**
  * Returns a {@link RouteBaseNameFunction} used get the base name of a route.
  */
 export function useRouteBaseName(): RouteBaseNameFunction {
-  // @ts-expect-error - generated types conflict with the generic types we accept
   return wrapComposable(getRouteBaseName)
 }
 

src/runtime/routing/routing.ts

@@ -8,22 +8,26 @@ import { getLocaleRouteName, getRouteName } from './utils'
 import { extendPrefixable, extendSwitchLocalePathIntercepter, type CommonComposableOptions } from '../utils'
 
 import type { Locale } from 'vue-i18n'
-import type { RouteLocationRaw, RouteLocationPathRaw, RouteLocationNamedRaw, RouteRecordNameGeneric } from 'vue-router'
+import type { RouteLocationRaw, RouteLocationPathRaw, RouteLocationNamedRaw, RouteMap } from 'vue-router'
 import type { I18nPublicRuntimeConfig } from '#internal-i18n-types'
-import type { CompatRoute } from '../types'
+import type { CompatRoute, RouteLocationGenericPath } from '../types'
 
 /**
  * Returns base name of current (if argument not provided) or passed in route.
  *
  * @remarks
  * Base name is name of the route without locale suffix and other metadata added by nuxt i18n module
  */
-export function getRouteBaseName(common: CommonComposableOptions, route: { name?: RouteRecordNameGeneric | null }) {
+export function getRouteBaseName<Name extends keyof RouteMap = keyof RouteMap>(
+  common: CommonComposableOptions,
+  route: Name | RouteLocationGenericPath | null
+) {
   const _route = unref(route)
-  if (_route == null || !_route.name) {
+  const routeName = typeof _route === 'object' ? _route?.name : _route
+  if (_route == null || !routeName) {
     return
   }
-  const name = getRouteName(_route.name)
+  const name = getRouteName(routeName)
   return name.split(common.runtimeConfig.public.i18n.routesNameSeparator)[0]
 }
 

src/runtime/routing/utils.ts

@@ -10,7 +10,7 @@ export function getNormalizedLocales(locales: Locale[] | LocaleObject[]): Locale
   return locales.map(x => (typeof x === 'string' ? { code: x } : x))
 }
 
-export function getRouteName(routeName?: string | symbol | null) {
+export function getRouteName(routeName?: string | symbol | number | null) {
   if (typeof routeName === 'string') return routeName
   if (routeName != null) return routeName.toString()
   return '(null)'

src/runtime/types.ts

@@ -2,12 +2,17 @@ import type { NuxtApp } from '#app'
 import type { ComputedRef } from 'vue'
 import type { Directions, LocaleObject, Strategies } from '#internal-i18n-types'
 import type { I18n, Locale, Composer, VueI18n, ExportedGlobalComposer } from 'vue-i18n'
-import type { RouteLocationNormalizedGeneric, RouteRecordNameGeneric } from 'vue-router'
+import type { RouteLocationAsRelative, RouteLocationNormalizedGeneric, RouteRecordNameGeneric } from 'vue-router'
 
 export type CompatRoute = Omit<RouteLocationNormalizedGeneric, 'name'> & {
   name: RouteRecordNameGeneric | null
 }
 
+export type RouteLocationGenericPath = Omit<RouteLocationAsRelative, 'path' | 'name'> & {
+  path?: string
+  name?: RouteLocationAsRelative['name'] | null
+}
+
 /**
  * Called before the app's locale is switched.
  *