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

Vuetify предоставляет встроенные возможности для интернационализации (i18n), что позволяет создавать интерфейсы, поддерживающие несколько языков. Основной инструмент для работы с локализацией в Vuetify — объект vuetify с опцией locale, который управляет текущим языком приложения и переводами встроенных компонентов.

Настройка локализации

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

import { createVuetify } from 'vuetify'
import { zhHans, en } from 'vuetify/locale'

const vuetify = createVuetify({
  locale: {
    locale: 'en', // язык по умолчанию
    messages: { en, zhHans } // подключенные языковые пакеты
  }
})

В объекте messages ключи соответствуют кодам языков, а значения — объектам перевода встроенных компонентов Vuetify (например, диалогов, кнопок, подсказок).

Изменение языка на лету

Для динамического переключения языка используется свойство vuetify.framework.locale.current (в Vuetify 2) или vuetify.locale.current (в Vuetify 3):

// Vuetify 3
vuetify.locale.current = 'zhHans'

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

Подключение сторонних переводов

Помимо встроенных языков, можно добавлять собственные переводы для текста в приложении:

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

const vuetify = createVuetify({
  locale: {
    locale: 'ru',
    messages: {
      ...customMessages,
      en, zhHans
    }
  }
})

В шаблонах эти переводы можно использовать через функцию $vuetify.lang.t:

<template>
  <div>{{ $vuetify.lang.t('hello') }}</div>
</template>

При смене языка $vuetify.lang.t('hello') будет возвращать текст на выбранном языке.

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

Vuetify легко интегрируется с внешней библиотекой Vue I18n, что позволяет централизованно управлять переводами всего приложения. Для этого достаточно передать текущий язык из Vue I18n в vuetify.locale:

import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  locale: 'ru',
  messages: {
    en: { welcome: 'Welcome' },
    ru: { welcome: 'Добро пожаловать' }
  }
})

const vuetify = createVuetify({
  locale: {
    locale: i18n.global.locale.value
  }
})

// Смена языка
i18n.global.locale.value = 'en'
vuetify.locale.current = i18n.global.locale.value

Таким образом, локализация компонентов Vuetify синхронизируется с локализацией всего приложения.

Переключение языков через пользовательский интерфейс

Для создания переключателя языков удобно использовать v-select или v-btn-toggle:

<template>
  <v-select
    :items="languages"
    v-model="currentLanguage"
    label="Выберите язык"
    @change="changeLanguage"
  ></v-select>
</template>

<script>
export default {
  data() {
    return {
      currentLanguage: 'en',
      languages: [
        { text: 'English', value: 'en' },
        { text: '简体中文', value: 'zhHans' },
        { text: 'Русский', value: 'ru' }
      ]
    }
  },
  methods: {
    changeLanguage(lang) {
      this.$vuetify.locale.current = lang
    }
  }
}
</script>

При выборе нового языка интерфейс Vuetify обновляется автоматически, включая все стандартные компоненты: кнопки, диалоги, формы, всплывающие подсказки.

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

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

async function loadLanguage(lang) {
  if (!vuetify.locale.messages[lang]) {
    const messages = await import(`vuetify/locale/${lang}.mjs`)
    vuetify.locale.messages[lang] = messages.default
  }
  vuetify.locale.current = lang
}

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

Особенности перевода компонентов

  1. Встроенные компоненты Vuetify: тексты кнопок диалогов, подсказок и календарей управляются через объект messages.
  2. Собственные компоненты: для текста внутри приложения нужно использовать либо Vue I18n, либо кастомные сообщения, передаваемые через $vuetify.lang.t.
  3. Форматы дат и чисел: для корректного отображения рекомендуется использовать встроенные фильтры Vuetify или интегрировать библиотеку Intl.DateTimeFormat.

Выводы по организации локализации

  • Централизованное управление языками через vuetify.locale позволяет мгновенно обновлять интерфейс.
  • Интеграция с Vue I18n обеспечивает поддержку кастомных сообщений и более сложной логики перевода.
  • Динамическая подгрузка языков уменьшает размер бандла и ускоряет старт приложения.
  • Стандартные компоненты Vuetify полностью совместимы с локализацией, включая формы, диалоги, календарь и тултипы.
Оглавление