fix: legacy and composition type narrowing for vue-i18n (#3526)

* chore(deps): update `vue-i18n`

* fix: narrow `vue-i18n` types based on `types` option

* fix: type issues

Author: BobbieGoede

package.json

@@ -83,7 +83,7 @@
   },
   "dependencies": {
     "@intlify/h3": "^0.6.1",
-    "@intlify/shared": "^11.1.2",
+    "@intlify/shared": "^11.1.3",
     "@intlify/unplugin-vue-i18n": "^6.0.5",
     "@intlify/utils": "^0.13.0",
     "@miyaneee/rollup-plugin-json5": "^1.2.0",
@@ -105,7 +105,7 @@
     "ufo": "^1.5.4",
     "unplugin": "^2.2.2",
     "unplugin-vue-router": "^0.12.0",
-    "vue-i18n": "^11.1.2",
+    "vue-i18n": "^11.1.3",
     "vue-router": "^4.5.0"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -194,13 +194,12 @@ declare module 'vue-router' {
 }`
 
 export function generateI18nTypes(nuxt: Nuxt, { userOptions: options, normalizedLocales }: I18nNuxtContext) {
-  const vueI18nTypes = options.types === 'legacy' ? ['VueI18n'] : ['ExportedGlobalComposer', 'Composer']
+  const legacyTypes = options.types === 'legacy'
+  const i18nType = legacyTypes ? 'VueI18n' : 'Composer'
   const generatedLocales = simplifyLocaleOptions(nuxt, options)
   const resolvedLocaleType = isString(generatedLocales) ? 'Locale[]' : 'LocaleObject[]'
   const narrowedLocaleType = normalizedLocales.map(x => JSON.stringify(x.code)).join(' | ') || 'string'
 
-  const i18nType = `${vueI18nTypes.join(' & ')} & NuxtI18nRoutingCustomProperties<${resolvedLocaleType}>`
-
   const globalTranslationTypes = `
 declare global {
   var $t: (${i18nType})['t']
@@ -213,30 +212,30 @@ declare global {
 
   // prettier-ignore
   return `// Generated by @nuxtjs/i18n
-import type { ${vueI18nTypes.join(', ')} } from 'vue-i18n'
-import type { NuxtI18nRoutingCustomProperties, ComposerCustomProperties } from '${relative(
+import type { ${i18nType} } from 'vue-i18n'
+import type { ComposerCustomProperties } from '${relative(
     join(nuxt.options.buildDir, 'types'),
     resolve(runtimeDir, 'types.ts')
   )}'
 import type { Strategies, Directions, LocaleObject } from '${relative(
     join(nuxt.options.buildDir, 'types'),
-    resolve(distDir, 'types.d.ts')
+    resolve(distDir, 'types.d.mts')
   )}'
 
 declare module 'vue-i18n' {
   interface ComposerCustom extends ComposerCustomProperties<${resolvedLocaleType}> {}
-  interface ExportedGlobalComposer extends NuxtI18nRoutingCustomProperties<${resolvedLocaleType}> {}
-  interface VueI18n extends NuxtI18nRoutingCustomProperties<${resolvedLocaleType}> {}
+  interface ExportedGlobalComposer extends ComposerCustomProperties<${resolvedLocaleType}> {}
+  interface VueI18n extends ComposerCustomProperties<${resolvedLocaleType}> {}
 }
 
 declare module '@intlify/core-base' {
   // generated based on configured locales
   interface GeneratedTypeConfig { 
     locale: ${narrowedLocaleType}
+    legacy: ${legacyTypes}
   }
 }
 
-
 declare module '#app' {
   interface NuxtApp {
     $i18n: ${i18nType}

src/gen.ts

@@ -1,15 +1,15 @@
-import type { Composer, ExportedGlobalComposer, VueI18n } from 'vue-i18n'
-import type { ComposerCustomProperties, NuxtI18nRoutingCustomProperties } from './runtime/types'
+import type { Composer, VueI18n } from 'vue-i18n'
+import type { ComposerCustomProperties } from './runtime/types'
 
 declare module 'vue-i18n' {
   interface ComposerCustom extends ComposerCustomProperties {}
-  interface ExportedGlobalComposer extends NuxtI18nRoutingCustomProperties {}
-  interface VueI18n extends NuxtI18nRoutingCustomProperties {}
+  interface ExportedGlobalComposer extends ComposerCustomProperties {}
+  interface VueI18n extends ComposerCustomProperties {}
 }
 
 declare module '#app' {
   interface NuxtApp {
-    $i18n: VueI18n & ExportedGlobalComposer & Composer & NuxtI18nRoutingCustomProperties
+    $i18n: VueI18n & Composer
   }
 }
 

src/internal-global-types.d.ts

@@ -90,7 +90,7 @@ export default defineNuxtPlugin({
     extendI18n(i18n, {
       extendComposer(composer) {
         const _locales = ref<Locale[] | LocaleObject[]>(runtimeI18n.locales)
-        composer.locales = computed(() => _locales.value as unknown as typeof composer.locales.value)
+        composer.locales = computed(() => _locales.value)
 
         const _localeCodes = ref<Locale[]>(localeCodes)
         composer.localeCodes = computed(() => _localeCodes.value)

src/runtime/plugins/i18n.ts

@@ -35,8 +35,8 @@ type HeadContext = {
 function createHeadContext(options: Required<I18nHeadOptions>): HeadContext {
   const nuxtApp = useNuxtApp()
   const locale = unref(nuxtApp.$i18n.locale)
-  const locales = unref(nuxtApp.$i18n.locales).map(x => (isString(x) ? { code: x } : x))
-  const currentLocale: LocaleObject = locales.find(l => l.code === locale) || { code: locale }
+  const locales = unref(nuxtApp.$i18n.locales).map(x => (isString(x) ? { code: x } : (x as LocaleObject)))
+  const currentLocale = locales.find(l => l.code === locale) || { code: locale }
   const baseUrl = joinURL(unref(getComposer(nuxtApp.$i18n).baseUrl), nuxtApp.$config.app.baseURL)
   const runtimeI18n = nuxtApp.$config.public.i18n as I18nPublicRuntimeConfig
 

src/runtime/routing/head.ts

@@ -43,7 +43,28 @@ type BeforeLanguageSwitchHandler = (
  */
 type LanguageSwitchedHandler = (oldLocale: Locale, newLocale: Locale) => Promise<void>
 
-interface SharedProperties {
+/**
+ * @template ConfiguredLocaleType - The type of the locales configuration. Can be an array of string codes or an array of {@link LocaleObject}.
+ */
+export interface ComposerCustomProperties<
+  ConfiguredLocaleType extends Locale[] | LocaleObject[] = Locale[] | LocaleObject[]
+> {
+  /**
+   * List of locales - can either be an array of string codes (e.g. `['en', 'fr']`) or an array of {@link LocaleObject} for more complex configurations
+   */
+  locales: ComputedRef<ConfiguredLocaleType>
+  /**
+   * List of locale codes
+   */
+  localeCodes: ComputedRef<Locale[]>
+  /**
+   * Base URL that is used in generating canonical links
+   */
+  baseUrl: ComputedRef<string>
+  /**
+   * Current locale properties.
+   */
+  localeProperties: ComputedRef<LocaleObject>
   /**
    * Routing strategy.
    */
@@ -131,54 +152,6 @@ interface SharedProperties {
   __extendComposer: (instance: Composer | VueI18n | ExportedGlobalComposer) => void
 }
 
-export interface ComposerCustomProperties<
-  ConfiguredLocaleType extends Locale[] | LocaleObject[] = Locale[] | LocaleObject[]
-> extends SharedProperties {
-  /**
-   * List of locales
-   *
-   * @remarks
-   * Can either be an array of string codes (e.g. `['en', 'fr']`) or an array of {@link LocaleObject} for more complex configurations
-   */
-  locales: ComputedRef<ConfiguredLocaleType>
-  /**
-   * List of locale codes
-   */
-  localeCodes: ComputedRef<Locale[]>
-  /**
-   * Base URL that is used in generating canonical links
-   */
-  baseUrl: ComputedRef<string>
-  /**
-   * Current locale properties.
-   */
-  localeProperties: ComputedRef<LocaleObject>
-}
-
-export interface NuxtI18nRoutingCustomProperties<
-  ConfiguredLocaleType extends Locale[] | LocaleObject[] = Locale[] | LocaleObject[]
-> extends SharedProperties {
-  /**
-   * List of locales
-   *
-   * @remarks
-   * Can either be an array of string codes (e.g. `['en', 'fr']`) or an array of {@link LocaleObject} for more complex configurations
-   */
-  readonly locales: ConfiguredLocaleType
-  /**
-   * List of locale codes
-   */
-  readonly localeCodes: Locale[]
-  /**
-   * Base URL that is used in generating canonical links
-   */
-  baseUrl: string
-  /**
-   * Current locale properties.
-   */
-  localeProperties: LocaleObject
-}
-
 declare module '#app' {
   interface NuxtApp {
     /** @internal */