Новые изменения в v12

Удаление режима устаревшего API

Причина: Режим устаревшего API был объявлен устаревшим в v11, как указано в изменениях в v11. Это был режим API, совместимый с Vue I18n v8 для Vue 2, предоставляемый для плавной миграции с v8 на v9.

В версии v12 режим устаревшего API был полностью удален. Опция legacy в createI18n больше не доступна, и все приложения должны использовать режим Composition API.

Что было удалено

• Опция legacy: true в createI18n
• Экземпляр VueI18n (устаревший интерфейс)
• Тип VueI18nOptions
• Опция allowComposition (больше не нужна, поскольку Composition API является единственным режимом)
• Специфичные для устаревшего API функции внедрения, зависящие от экземпляра VueI18n

До (v11)

import { createI18n } from 'vue-i18n'

// Режим устаревшего API
const i18n = createI18n({
  legacy: true, // Это было значением по умолчанию в предыдущих версиях
  locale: 'en',
  messages: {
    en: { hello: 'Hello!' },
    ja: { hello: 'こんにちは！' }
  }
})

// Доступ через экземпляр VueI18n
i18n.global.locale = 'ja'

<!-- В компоненте с Options API -->
<template>
  <p>{{ $t('hello') }}</p>
</template>

<script>
export default {
  mounted() {
    // Доступ через this.$i18n (экземпляр VueI18n)
    console.log(this.$i18n.locale)
    this.$i18n.locale = 'ja'
  }
}
</script>

После (v12)

import { createI18n } from 'vue-i18n'

// Режим Composition API (единственный доступный режим)
const i18n = createI18n({
  locale: 'en',
  messages: {
    en: { hello: 'Hello!' },
    ja: { hello: 'こんにちは！' }
  }
})

// Доступ через экземпляр Composer
i18n.global.locale.value = 'ja'

<!-- Использование Composition API -->
<template>
  <p>{{ t('hello') }}</p>
</template>

<script setup>
import { useI18n } from 'vue-i18n'

const { t, locale } = useI18n()

// Изменение локали
locale.value = 'ja'
</script>

<!-- Options API с useI18n в setup -->
<template>
  <p>{{ t('hello') }}</p>
</template>

<script>
import { useI18n } from 'vue-i18n'

export default {
  setup() {
    const { t, locale } = useI18n()
    return { t, locale }
  }
}
</script>

Миграция

1. Удалите опцию legacy: true из createI18n
2. Измените доступ к локали с i18n.global.locale на i18n.global.locale.value
3. Замените использование this.$i18n на useI18n() в функции setup
4. Замените this.$t() на t() из useI18n()

Для подробного руководства по миграции см.:

• Миграция с режима устаревшего API на режим Composition API
• Использование Composition API

Удаление пользовательской директивы v-t

Причина: Эта пользовательская директива была объявлена устаревшей с предупреждением о её удалении в v12. В документации говорится: https://vue-i18n.intlify.dev/guide/migration/breaking11.html#deprecate-custom-directive-v-t

Изменение сигнатуры MissingHandler

Причина: В Vue 3.6+ устарела API getCurrentInstance(). Тип MissingHandler ранее получал ComponentInternalInstance в качестве третьего параметра, но теперь он недоступен.

До (v11)

type MissingHandler = (
  locale: Locale,
  key: Path,
  instance?: ComponentInternalInstance,
  type?: string
) => string | void

const i18n = createI18n({
  missing: (locale, key, instance, type) => {
    // instance was ComponentInternalInstance
    console.warn(`Missing: ${key}`, instance?.uid)
  }
})

После (v12)

type MissingHandler = (
  locale: Locale,
  key: Path,
  uid?: number,
  type?: string
) => string | void

const i18n = createI18n({
  missing: (locale, key, uid, type) => {
    // uid теперь передается напрямую как число
    console.warn(`Missing: ${key}`, uid)
  }
})

Миграция

Замените параметр instance на uid:

 const i18n = createI18n({
-  missing: (locale, key, instance, type) => {
-    console.warn(`Missing key "${key}" in ${locale}`, instance?.uid)
+  missing: (locale, key, uid, type) => {
+    console.warn(`Missing key "${key}" in ${locale}`, uid)
   }
 })