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

Quasar предоставляет встроенные возможности для организации многоязычного интерфейса и управления локализацией. Основой является использование пакета @quasar/cli и функционала i18n, который позволяет централизованно хранить и переключать языковые ресурсы.

Подключение и настройка i18n

Для начала необходимо установить пакет quasar/lang для нужных языков:

import { createI18n } from 'vue-i18n'
import messages from 'src/i18n'

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

export default i18n

Файл src/i18n/index.js содержит все переводы в виде объекта:

export default {
  en: {
    greeting: "Hello",
    farewell: "Goodbye"
  },
  ru: {
    greeting: "Привет",
    farewell: "До свидания"
  },
  fr: {
    greeting: "Bonjour",
    farewell: "Au revoir"
  }
}

Ключевое — единая структура сообщений, что обеспечивает легкость добавления новых языков и масштабирования проекта.

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

Quasar позволяет интегрировать локализацию на уровне компонентов UI через собственные плагины и Quasar.lang для системных компонентов, таких как диалоги, уведомления и календарь:

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

Quasar.lang.set(ru)

При смене языка интерфейсных компонентов достаточно вызвать Quasar.lang.set(newLang), где newLang — объект локали из пакета quasar/lang.

Динамическое переключение языка

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

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

export default {
  setup() {
    const { locale } = useI18n()
    const currentLang = ref(locale.value)

    function changeLanguage(lang) {
      locale.value = lang
      currentLang.value = lang
      switchQuasarLang(lang)
    }

    function switchQuasarLang(lang) {
      import(`quasar/lang/${lang}.mjs`).then(mod => {
        Quasar.lang.set(mod.default)
      })
    }

    return { currentLang, changeLanguage }
  }
}

Здесь используется динамический импорт, что позволяет подгружать только нужные языковые файлы и экономить ресурсы.

Организация файлов локализации

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

src/i18n/
 ├─ common.js
 ├─ dashboard.js
 ├─ auth.js
 └─ index.js

В index.js собираются все модули:

import common from './common'
import dashboard from './dashboard'
import auth from './auth'

export default {
  en: { ...common.en, ...dashboard.en, ...auth.en },
  ru: { ...common.ru, ...dashboard.ru, ...auth.ru }
}

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

Переводы в компонентах Quasar

Quasar компоненты поддерживают перевод через слоты, свойства и глобальные сообщения:

<q-btn :label="$t('greeting')" @click="sayHello" />
<q-dialog v-model="dialog" :title="$t('auth.loginTitle')">
  <q-card>
    <q-card-section>{{ $t('auth.enterCredentials') }}</q-card-section>
  </q-card>
</q-dialog>

Использование $t('key') позволяет автоматически получать актуальный перевод при смене locale.

Синхронизация с системными датами и форматами

Для правильного отображения дат, времени и чисел используется Intl совместно с vue-i18n:

const formattedDate = new Intl.DateTimeFormat(locale.value, {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
}).format(new Date())

Quasar предоставляет компоненты вроде QDate, которые также поддерживают локализацию через Quasar.lang.

Сохранение выбранного языка

Для сохранения языка между сессиями часто используют localStorage или Cookies:

function changeLanguage(lang) {
  locale.value = lang
  localStorage.setItem('app-language', lang)
  switchQuasarLang(lang)
}

// Инициализация при старте
const savedLang = localStorage.getItem('app-language')
if (savedLang) {
  locale.value = savedLang
  switchQuasarLang(savedLang)
}

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