Кастомные переводы

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

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

Для работы с кастомными переводами необходимо подключить Vuetify с поддержкой локализации. В версии Vuetify 3 это делается через объект createVuetify и опцию locale:

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

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

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

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

Добавление кастомных сообщений

Vuetify позволяет расширять стандартные переводы или полностью создавать собственные строки. Для этого в объект messages добавляются кастомные ключи:

const messages = {
  ru: {
    $vuetify: {
      dataIterator: {
        noResultsText: 'Результаты не найдены',
        loadingText: 'Загрузка данных...',
      },
      dataTable: {
        itemsPerPageText: 'Элементов на странице:',
      },
    },
    custom: {
      welcomeMessage: 'Добро пожаловать в приложение!',
      submitButton: 'Отправить',
    },
  },
}
  • Все стандартные строки Vuetify располагаются внутри $vuetify.
  • Собственные переводы можно поместить в отдельный объект, например custom.
  • Ключи могут быть вложенными для организации и удобного доступа.

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

Vuetify позволяет менять язык интерфейса во время выполнения:

vuetify.framework.locale.current = 'en'

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

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

Для использования кастомных строк в шаблонах Vue применяются функции $t и v-text:

<template>
  <div>
    <p>{{ $t('custom.welcomeMessage') }}</p>
    <v-btn>{{ $t('custom.submitButton') }}</v-btn>
  </div>
</template>
  • $t('ключ') возвращает строку перевода для текущего языка.
  • Можно комбинировать с динамическими ключами для сложных случаев:
computed: {
  buttonLabel() {
    const type = 'submit'
    return this.$t(`custom.${type}Button`)
  }
}

Переопределение стандартных переводов Vuetify

Для изменения текста встроенных компонентов достаточно добавить новые значения в объект $vuetify:

const ru = {
  $vuetify: {
    dataIterator: {
      noResultsText: 'Ничего не найдено',
    },
    dataTable: {
      itemsPerPageText: 'Показать на странице:',
    },
    pagination: {
      ariaLabel: {
        next: 'Следующая страница',
        previous: 'Предыдущая страница',
      },
    },
  },
}
  • Эти значения автоматически заменяют стандартные.
  • Можно частично переопределять только нужные строки, остальные останутся стандартными.

Локализация компонентов третьих сторон

Vuetify также предоставляет возможность интеграции кастомных переводов для сторонних компонентов через provide:

import { createApp } from 'vue'
import { createVuetify } from 'vuetify'

const app = createApp(App)

app.use(createVuetify({
  locale: {
    locale: 'ru',
    messages,
  },
}))
  • Любой компонент, использующий $vuetify или $t, получит переводы автоматически.
  • Для глобального доступа можно создавать отдельный модуль i18n.js с функцией getMessage(key).

Советы по организации кастомных переводов

  1. Структурирование ключей Использовать вложенные объекты для разных категорий компонентов: buttons, messages, dialogs.

  2. Fallback и дефолтные значения Всегда задавать fallback язык, чтобы избежать пустых строк.

  3. Поддержка динамических параметров Переводы могут содержать placeholders:

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

Работа с Vue I18n и Vuetify

Vuetify совместим с Vue I18n, что позволяет использовать единый механизм локализации для всего приложения:

import { createI18n } from 'vue-i18n'

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

const vuetify = createVuetify({
  locale: {
    adapter: i18n.global, // интеграция с Vue I18n
  },
})
  • Позволяет использовать $t для всех компонентов, включая сторонние и кастомные.
  • Поддерживает сложные правила plurals, date/time formatting и кастомные фильтры перевода.

Итоговая структура кастомного перевода

messages = {
  ru: {
    $vuetify: { ... }, // стандартные компоненты
    custom: { ... },   // пользовательские строки
  },
  en: {
    $vuetify: { ... },
    custom: { ... },
  },
}
  • Чёткое разделение стандартных и пользовательских переводов упрощает поддержку.
  • Позволяет масштабировать интерфейс на новые языки без изменения компонентов.

Кастомные переводы в Vuetify обеспечивают гибкость, позволяют полностью контролировать текст интерфейса и интегрируются с Vue I18n для построения многоязычных приложений. Правильная структура, динамическая смена языка и переопределение стандартных строк позволяют создавать качественные локализованные интерфейсы.

Оглавление