Настройка языков

Vuetify предоставляет мощный механизм для работы с локализацией, позволяя адаптировать пользовательский интерфейс под разные языки и региональные особенности. Основной инструмент для этого — объект vuetify.framework.lang, который управляет переводами компонентов, сообщений об ошибках и форматированием дат и чисел.

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

Vuetify использует пакет @vuetify/locale для подключения языковых пакетов. Чтобы изменить язык интерфейса, необходимо импортировать соответствующую локаль и передать её в конфигурацию Vuetify:

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

const vuetify = createVuetify({
  locale: {
    locale: 'ru',
    messages: { en, ru },
  },
})
  • locale — текущий выбранный язык интерфейса.
  • messages — объект, содержащий все доступные переводы.

Можно добавлять собственные языковые пакеты, создавая объект с ключами, соответствующими компонентам и элементам UI:

const customRu = {
  $vuetify: {
    close: 'Закрыть',
    dataIterator: {
      noResultsText: 'Результаты не найдены',
      loadingText: 'Загрузка...',
    },
  },
}

И затем объединять с существующими локалями:

const vuetify = createVuetify({
  locale: {
    locale: 'ru',
    messages: { ru: { ...ru, ...customRu } },
  },
})

Динамическая смена языка

Vuetify позволяет менять язык на лету без перезагрузки страницы:

vuetify.framework.lang.current = 'en'

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

Для реактивного управления языком часто используют Vuex или Composition API:

import { ref, watch } from 'vue'

const currentLang = ref('ru')

watch(currentLang, (newLang) => {
  vuetify.framework.lang.current = newLang
})

Локализация компонентов формы и валидации

Некоторые компоненты Vuetify, например v-text-field с правилами валидации, могут использовать встроенные сообщения об ошибках. Их текст также локализуется через объект messages. Можно переопределять стандартные ошибки:

const messages = {
  ru: {
    $vuetify: {
      validation: {
        required: 'Поле обязательно для заполнения',
        email: 'Введите корректный email',
      },
    },
  },
}

При этом сообщения автоматически подтягиваются в правила валидации:

rules: [
  v => !!v || vuetify.framework.lang.t('$vuetify.validation.required'),
]

Форматирование дат и чисел

Vuetify интегрируется с библиотеками Intl и date-fns для локализованного отображения дат и чисел в компонентах, таких как v-date-picker и v-data-table. Настройка происходит через свойства locale и formatter:

<v-date-picker :locale="currentLang"></v-date-picker>

Для чисел можно использовать встроенный фильтр Intl.NumberFormat:

const formattedNumber = new Intl.NumberFormat(currentLang.value, {
  style: 'currency',
  currency: 'RUB',
}).format(12345.67)

Создание кастомных локалей для компонентов

Каждый компонент Vuetify может иметь свои собственные тексты, которые можно локализовать через ключи в объекте messages. Пример для v-pagination:

const ruPagination = {
  $vuetify: {
    pagination: {
      ariaLabel: 'Страницы',
      next: 'Следующая страница',
      previous: 'Предыдущая страница',
    },
  },
}

Объединение с глобальными локалями:

const vuetify = createVuetify({
  locale: {
    locale: 'ru',
    messages: { ru: { ...ru, ...ruPagination } },
  },
})

Автоматическое определение языка пользователя

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

const userLang = navigator.language || 'en'
vuetify.framework.lang.current = userLang.startsWith('ru') ? 'ru' : 'en'

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

Итоговая структура объекта локализации

Объект messages Vuetify обычно имеет вложенную структуру:

  • $vuetify — глобальные строки интерфейса.
  • dataIterator — таблицы и списки.
  • pagination — элементы навигации по страницам.
  • validation — правила валидации форм.
  • datePicker — текстовые элементы календаря.
  • additional components — можно добавлять ключи для пользовательских компонентов.

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

Оглавление