Переводы в Composition API

Vue.js предоставляет мощный механизм для организации логики приложения через Composition API. Одним из распространённых сценариев является работа с локализацией и переводами текста в приложении. В Composition API подход к переводам отличается гибкостью и модульностью по сравнению с Options API.

Основные принципы локализации

Локализация (i18n) в Vue.js предполагает хранение текстов на разных языках и их динамическую подстановку в интерфейсе. Ключевые моменты:

  • Разделение текстов по языкам: каждая языковая версия хранится отдельно, обычно в JSON-файлах.
  • Использование ключей вместо прямого текста: позволяет динамически менять язык без модификации шаблонов.
  • Реактивность переводов: при смене языка интерфейс автоматически обновляется.

Пример структуры JSON для английского и русского языков:

// en.json
{
  "welcome": "Welcome",
  "logout": "Logout",
  "profile": {
    "greeting": "Hello, {name}!"
  }
}

// ru.json
{
  "welcome": "Добро пожаловать",
  "logout": "Выйти",
  "profile": {
    "greeting": "Привет, {name}!"
  }
}

Использование Vue I18n с Composition API

Vue I18n предоставляет встроенные функции для работы с переводами через Composition API. Основные функции:

  • useI18n() — подключение системы локализации к компоненту.
  • t() — функция для получения перевода по ключу.
  • locale — реактивная переменная текущего языка.
  • availableLocales — массив доступных языков.

Пример базовой конфигурации:

import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';
import App from './App.vue';
import en from './locales/en.json';
import ru from './locales/ru.json';

const messages = { en, ru };

const i18n = createI18n({
  legacy: false, // для Composition API
  locale: 'ru',
  fallbackLocale: 'en',
  messages
});

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

Доступ к переводам в компоненте

В Composition API доступ к переводам осуществляется через useI18n:

import { useI18n } from 'vue-i18n';
import { ref } from 'vue';

export default {
  setup() {
    const { t, locale } = useI18n();
    const username = ref('Алексей');

    const changeLanguage = (lang) => {
      locale.value = lang;
    };

    return { t, locale, username, changeLanguage };
  }
};

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

<template>
  <div>
    <h1>{{ t('welcome') }}</h1>
    <p>{{ t('profile.greeting', { name: username }) }}</p>
    <button @click="changeLanguage('en')">EN</button>
    <button @click="changeLanguage('ru')">RU</button>
  </div>
</template>

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

  • t('profile.greeting', { name: username }) поддерживает параметризацию текста.
  • Смена locale.value автоматически обновляет все переводы в компоненте.
  • ref используется для реактивных данных, подставляемых в переводы.

Работа с несколькими наборами переводов

В крупных приложениях полезно разделять переводы по функциональным модулям:

/locales
  /en
    auth.json
    dashboard.json
  /ru
    auth.json
    dashboard.json

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

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

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

Локализация форматов и чисел

Vue I18n поддерживает локализацию чисел, валют и дат:

const { n, d } = useI18n({
  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' } }
  }
});

const amount = 12345.67;
const date = new Date();

В шаблоне:

<p>{{ n(amount, 'currency') }}</p>
<p>{{ d(date, 'short') }}</p>

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

Рекомендации по организации переводов

  • Хранить ключи переводов в виде дерева по функциональным блокам.
  • Использовать параметры для динамических значений ({name}, {count}).
  • Для больших приложений применять ленивую загрузку модулей локализации.
  • Всегда указывать fallbackLocale для предотвращения ошибок при отсутствии перевода.
  • Интегрировать тесты для проверки корректности ключей переводов.

Реактивная смена языка

Composition API обеспечивает простую реактивную смену языка в приложении. Это позволяет создавать динамические интерфейсы, где пользователи могут переключать язык без перезагрузки страницы, а все компоненты автоматически обновляют свои переводы.

const { locale } = useI18n();

function toggleLanguage() {
  locale.value = locale.value === 'ru' ? 'en' : 'ru';
}

Использование реактивной переменной locale гарантирует синхронизацию перевода во всех компонентах, использующих t().

Итоговая структура для больших приложений

  1. Разделение JSON по языкам и модулям.
  2. Централизованное подключение через createI18n.
  3. Использование useI18n в компонентах для реактивных переводов.
  4. Поддержка параметров, форматов чисел и дат.
  5. Динамическая смена языка через реактивное свойство locale.

Такой подход обеспечивает масштабируемость и удобство поддержки локализации в сложных Vue-приложениях.

Оглавление