Настройка Vue I18n

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

npm install vue-i18n@9

После установки библиотеку подключают в основной файл приложения, обычно это src/boot/i18n.js:

import { boot } from 'quasar/wrappers'
import { createI18n } from 'vue-i18n'

const messages = {
  en: {
    greeting: 'Hello',
    farewell: 'Goodbye'
  },
  ru: {
    greeting: 'Привет',
    farewell: 'До свидания'
  }
}

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

export default boot(({ app }) => {
  app.use(i18n)
})

export { i18n }

Ключевые моменты настройки:

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

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

В шаблонах Vue компонента доступ к переводам осуществляется через директиву v-t или функцию $t:

<template>
  <div>
    <p>{{ $t('greeting') }}</p>
    <p v-t="'farewell'"></p>
  </div>
</template>

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

import { i18n } from 'boot/i18n'

i18n.global.locale.value = 'en' // смена языка на английский
console.log(i18n.global.t('greeting')) // вывод: Hello

Разделение сообщений по файлам

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

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

en.json:

{
  "greeting": "Hello",
  "farewell": "Goodbye"
}

ru.json:

{
  "greeting": "Привет",
  "farewell": "До свидания"
}

Загрузка сообщений через import:

import en from 'src/i18n/en.json'
import ru from 'src/i18n/ru.json'

const messages = { en, ru }

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

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

const number = 123456.78

i18n.global.locale.value = 'ru'
console.log(i18n.global.d(number, { style: 'currency', currency: 'RUB' })) // 123 456,78 ₽

i18n.global.locale.value = 'en'
console.log(i18n.global.d(number, { style: 'currency', currency: 'USD' })) // $123,456.78

Для даты:

const date = new Date()

console.log(i18n.global.d(date, { year: 'numeric', month: 'long', day: 'numeric' }))

Динамическая подгрузка языков

Чтобы не грузить все переводы сразу, можно использовать асинхронный импорт:

async function setLocale(locale) {
  if (!i18n.global.availableLocales.includes(locale)) {
    const messages = await import(`src/i18n/${locale}.json`)
    i18n.global.setLocaleMessage(locale, messages.default)
  }
  i18n.global.locale.value = locale
}

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

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

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

{
  "welcome": "Привет, {name}!"
}

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

<p>{{ $t('welcome', { name: 'Алексей' }) }}</p> <!-- Выведет: Привет, Алексей! -->

Работа с плуралом и множественными формами

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

{
  "apple": "яблоко | яблока | яблок"
}

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

<p>{{ $tc('apple', 1) }}</p> <!-- яблоко -->
<p>{{ $tc('apple', 3) }}</p> <!-- яблока -->
<p>{{ $tc('apple', 5) }}</p> <!-- яблок -->

Интеграция с Quasar UI

Quasar позволяет локализовать свои компоненты через Quasar.lang.set:

import { Quasar } from 'quasar'
import ruLang from 'quasar/lang/ru'

Quasar.lang.set(ruLang)

Можно синхронизировать язык компонентов Quasar с Vue I18n:

watch(() => i18n.global.locale.value, (newLocale) => {
  import(`quasar/lang/${newLocale}`).then(module => Quasar.lang.set(module.default))
})

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

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

Оглавление