Миграция с Vue I18n на Intlayer

Если ваше приложение Vue в настоящее время использует vue-i18n, вы можете перейти на Intlayer без переписывания ваших компонентов или переводов хуков. Intlayer предоставляет адаптер совместимости, который идеально отражает API vue-i18n, используя мощные возможности Intlayer под капотом.

Что делать

Чтобы начать, просто запустите команду инициализации в вашем проекте:

npx intlayer init

Во время инициализации Intlayer установит ваш файл конфигурации (intlayer.config.ts) и подготовит ваш проект к миграции. Вам нужно будет просто добавить плагин Intlayer в вашу конфигурацию Vite для автоматического создания псевдонима импортов vue-i18n.

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueI18nVitePlugin from "@intlayer/vue-i18n/plugin";

export default defineConfig({
  plugins: [vue(), vueI18nVitePlugin()],
});

Что происходит под капотом

vueI18nVitePlugin впрыскивает псевдоним модуля в ваш bundler. Любой импорт vue-i18n в вашей кодовой базе будет прозрачно перенаправлен на @intlayer/vue-i18n.

Под капотом адаптер обрабатывает сложный синтаксис vue-i18n изначально:

• Интерполяция и множественное число: Разрешает интерполяции {name} и список {0}. Трубные множественные числа ("car | cars") преобразуются в перечисление/плюральные узлы Intlayer на основе позиционной семантики.
• Форматы: Функции как d() и n() оборачивают Intl под капотом, соблюдая datetimeFormats и numberFormats, определенные в ваших опциях.
• Глобальное и локальное состояние: global.locale отображается на WritableComputedRef, поддерживаемый клиентом Intlayer, поэтому реактивность ведет себя точно, как ожидалось (например, locale.value = 'fr').
• Директивы: Директива v-t зарегистрирована и функционирует нормально.

Ваше приложение продолжает отображаться точно, как раньше, но контент питается ваши словари Intlayer, давая вам безопасность типов, лучшую оптимизацию bundle и беспрепятственную интеграцию CMS.