Vue I18n библиотека

Vue I18n — это официальная библиотека интернационализации для Vue.js, предназначенная для управления локалями и переводами в приложениях. Она обеспечивает динамическую подстановку переводов, поддержку чисел, валют, дат и времени в соответствии с региональными стандартами. Основной задачей Vue I18n является упрощение процесса мультиязычной разработки и поддержка масштабируемых приложений.

Установка и подключение

Для интеграции Vue I18n в проект используется пакет vue-i18n. В проектах на Vue 3 рекомендуется использовать версию 9+ библиотеки.

npm install vue-i18n@next

Создание экземпляра I18n в приложении:

import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';
import App from './App.vue';

const messages = {
  en: { message: { hello: 'Hello World' } },
  ru: { message: { hello: 'Привет мир' } }
};

const i18n = createI18n({
  locale: 'ru',
  fallbackLocale: 'en',
  messages
});

const app = createApp(App);
app.use(i18n);
app.mount('#app');

Ключевые моменты:

  • locale — текущий язык приложения.
  • fallbackLocale — язык по умолчанию при отсутствии перевода.
  • messages — объект с переводами, сгруппированными по языкам.

Использование в компонентах

Для доступа к переводам внутри Vue-компонентов используется глобальная функция $t.

<template>
  <div>
    <p>{{ $t('message.hello') }}</p>
  </div>
</template>

Особенности:

  • $t('ключ') возвращает соответствующий перевод в текущей локали.
  • Поддерживается вложенная структура ключей для удобства организации переводов.

Динамическая смена локали

Vue I18n позволяет изменять язык приложения в реальном времени без перезагрузки страницы:

methods: {
  changeLanguage(lang) {
    this.$i18n.locale = lang;
  }
}

Параметры и интерполяция

Переводы могут содержать динамические параметры:

const messages = {
  en: { greeting: 'Hello {name}!' },
  ru: { greeting: 'Привет, {name}!' }
};

Использование в компоненте:

<p>{{ $t('greeting', { name: 'Алексей' }) }}</p>

Преимущества интерполяции:

  • Позволяет использовать один и тот же ключ с различными данными.
  • Упрощает поддержку многоязычного контента.

Форматирование чисел и валют

Vue I18n предоставляет встроенные функции для локализованного отображения чисел, процентов и валют:

const i18n = createI18n({
  locale: 'ru',
  numberFormats: {
    ru: {
      currency: {
        style: 'currency',
        currency: 'RUB'
      }
    }
  }
});

Использование:

<p>{{ $n(123456.78, 'currency') }}</p>

Особенности форматирования:

  • $n() — функция для чисел и валют.
  • $d() — функция для форматирования дат.

Локализация дат и времени

Для корректного отображения дат используется объект datetimeFormats:

const i18n = createI18n({
  locale: 'ru',
  datetimeFormats: {
    ru: {
      short: {
        year: 'numeric', month: 'short', day: 'numeric'
      }
    }
  }
});

Использование:

<p>{{ $d(new Date(), 'short') }}</p>

Локализация сообщений с выбором форм (pluralization)

Vue I18n поддерживает различные формы числительных:

const messages = {
  en: { car: 'No cars | One car | {count} cars' },
  ru: { car: 'Нет машин | {count} машина | {count} машины | {count} машин' }
};

Вывод:

<p>{{ $tc('car', 5, { count: 5 }) }}</p>

Особенности:

  • $tc() — функция для обработки множественного числа.
  • Поддерживает сложные правила для языков с несколькими формами (например, русский).

Асинхронная подгрузка переводов

Для крупных приложений перевод можно загружать динамически:

async function loadLocaleMessages(locale) {
  const messages = await import(`./locales/${locale}.json`);
  i18n.global.setLocaleMessage(locale, messages.default);
  i18n.global.locale = locale;
}

Преимущества:

  • Снижает нагрузку на начальную загрузку.
  • Позволяет расширять приложение новыми языками без пересборки.

Интеграция с Vue Router

Для мультиязычных маршрутов можно синхронизировать локаль с URL:

const routes = [
  { path: '/:locale/home', component: Home }
];

router.beforeEach((to, from, next) => {
  const locale = to.params.locale;
  if (i18n.global.locale !== locale) {
    i18n.global.locale = locale;
  }
  next();
});

Особенности:

  • Поддерживает динамическую смену языка при навигации.
  • Позволяет создавать SEO-дружественные URL с языковыми префиксами.

Настройка fallback и обработка отсутствующих ключей

При отсутствии перевода Vue I18n автоматически использует fallbackLocale. Можно настроить кастомную обработку:

const i18n = createI18n({
  locale: 'ru',
  fallbackLocale: 'en',
  missing: (locale, key) => `Перевод для ${key} отсутствует`
});

Преимущества:

  • Удобно для разработки и тестирования переводов.
  • Обеспечивает читаемые сообщения вместо пустых строк.

Интеграция с компонентами сторонних библиотек

Vue I18n легко интегрируется с UI-компонентами, такими как Vuetify или Element Plus, через вычисляемые свойства или пропсы:

<v-btn>{{ $t('button.submit') }}</v-btn>
  • Поддержка реактивной смены языка без перезагрузки компонентов.
  • Возможность централизованного управления всеми текстовыми элементами интерфейса.

Рекомендации по структуре переводов

  • Разделять переводы по функциональным модулям: auth, dashboard, profile.
  • Использовать вложенные ключи для удобства навигации.
  • Поддерживать единообразный стиль ключей (camelCase или snake_case).
  • Хранить переводы в отдельных JSON-файлах для масштабируемости.

Миграция с Vue 2 на Vue 3

Основные изменения:

  • Используется createI18n() вместо new VueI18n().
  • Глобальные методы $t, $tc, $n, $d доступны через i18n.global.
  • Поддержка Composition API через useI18n():
import { useI18n } from 'vue-i18n';

export default {
  setup() {
    const { t } = useI18n();
    return { t };
  }
}

Преимущества Composition API:

  • Локализация отдельных компонентов без зависимости от глобального состояния.
  • Упрощение тестирования и повторного использования кода.
Оглавление