Настройка мультиязычности

Мультиязычность в приложениях Vue.js обеспечивается использованием специализированных библиотек для интернационализации (i18n). Наиболее популярным инструментом является vue-i18n, который позволяет управлять переводами, локалями и форматированием данных в зависимости от языка пользователя.

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

Для начала необходимо установить пакет:

npm install vue-i18n@next

В Vue 3 подключение производится через создание экземпляра i18n и добавление его в корневой объект приложения:

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

const messages = {
  en: {
    welcome: 'Welcome',
    greeting: 'Hello, {name}!'
  },
  ru: {
    welcome: 'Добро пожаловать',
    greeting: 'Привет, {name}!'
  }
};

const i18n = createI18n({
  locale: 'ru',          // текущий язык по умолчанию
  fallbackLocale: 'en',  // язык по умолчанию, если перевод отсутствует
  messages
});

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

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

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

Использование переводов в шаблонах

Для отображения текста на выбранном языке применяется директива $t:

<template>
  <div>
    <h1>{{ $t('welcome') }}</h1>
    <p>{{ $t('greeting', { name: 'Иван' }) }}</p>
  </div>
</template>

$t('ключ') возвращает строку перевода для текущей локали.
Вложенные параметры передаются через объект, что позволяет динамически вставлять значения.

Переключение языков

Для изменения текущей локали используется свойство i18n.global.locale:

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

<button @click="switchLanguage('en')">English</button>
<button @click="switchLanguage('ru')">Русский</button>

Переключение языка автоматически обновляет все компоненты, использующие $t.

Локализация чисел и дат

vue-i18n поддерживает форматирование чисел, валют и дат в соответствии с выбранной локалью.

const i18n = createI18n({
  locale: 'ru',
  messages,
  numberFormats: {
    en: { currency: { style: 'currency', currency: 'USD' } },
    ru: { currency: { style: 'currency', currency: 'RUB' } }
  },
  datetimeFormats: {
    en: { short: { year: 'numeric', month: 'short', day: 'numeric' } },
    ru: { short: { year: 'numeric', month: 'long', day: 'numeric' } }
  }
});

В шаблоне применяются фильтры для форматирования:

<p>{{ 12345.67 | $n('currency') }}</p>
<p>{{ new Date() | $d('short') }}</p>

$n('ключ') — форматирует числа в соответствии с текущей локалью.
$d('ключ') — форматирует даты и время.

Структура переводов для крупных проектов

Для больших приложений рекомендуется хранить переводы в отдельных файлах:

src/
 └─ locales/
     ├─ en.json
     └─ ru.json

Пример файла ru.json:

{
  "welcome": "Добро пожаловать",
  "greeting": "Привет, {name}!"
}

Подключение:

import ru from './locales/ru.json';
import en from './locales/en.json';

const messages = { en, ru };

Такой подход упрощает поддержку и масштабирование проекта.

Динамическая загрузка локалей

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

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

Это особенно полезно для приложений с большим количеством языков и текстов.

Интерполяция и Plurals

vue-i18n поддерживает сложные конструкции, включая множественные формы слов:

{
  "car": "У вас {count} машина | У вас {count} машины | У вас {count} машин"
}

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

$tc('ключ', число) автоматически выбирает правильную форму слова в зависимости от количества.