useLocale

useLocale — это композиционный API, предоставляемый Vuetify, который позволяет управлять локализацией приложения, поддерживая динамическое изменение языка интерфейса и работу с переводами. Он тесно интегрирован с системой i18n Vuetify, предоставляя доступ к текущей локали, функциям форматирования текста и чисел, а также к обновлению настроек локализации в реальном времени.

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

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

import { useLocale } from 'vuetify';

Создание экземпляра locale обычно выполняется внутри setup функции компонента:

export default {
  setup() {
    const locale = useLocale();

    return { locale };
  }
}

После этого объект locale предоставляет полный доступ к локализации приложения.

Основные свойства и методы

current

Свойство current хранит текущую локаль приложения в виде строки, например 'en' или 'ru'.

console.log(locale.current); // 'en'

Можно динамически изменять язык интерфейса, присваивая новое значение:

locale.current = 'ru';

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

available

Свойство available содержит массив всех локалей, зарегистрированных в приложении:

console.log(locale.available); // ['en', 'ru', 'fr']

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

t(key, ...params)

Метод t отвечает за перевод текстовых ключей. Он принимает ключ из словаря локализации и, при необходимости, дополнительные параметры для подстановки.

const message = locale.t('button.save');
console.log(message); // 'Сохранить', если текущая локаль - 'ru'

Поддерживаются параметры для динамической подстановки:

const message = locale.t('greeting', { name: 'Иван' });
console.log(message); // 'Привет, Иван!'

n(value, options?)

Метод n используется для форматирования чисел с учётом текущей локали:

const formatted = locale.n(12345.67);
console.log(formatted); // '12 345,67' для 'ru'

Параметры форматирования можно передавать через объект options, совместимый с Intl.NumberFormat:

const formatted = locale.n(0.85, { style: 'percent' });
console.log(formatted); // '85%'

d(value, options?)

Метод d предназначен для форматирования дат и времени. Использует стандарт Intl.DateTimeFormat.

const date = locale.d(new Date(), { dateStyle: 'full' });
console.log(date); // 'вторник, 17 марта 2026 г.' для 'ru'

Поддерживаются опции для настройки формата:

locale.d(new Date(), { weekday: 'short', month: 'long', day: 'numeric' });

Интеграция с компонентами Vuetify

Компоненты Vuetify автоматически используют локаль, заданную через useLocale, для встроенных текстов и форматов. Например:

<v-date-picker v-model="date" :locale="locale.current"></v-date-picker>

Изменение locale.current в useLocale динамически обновляет язык календаря без перезагрузки страницы.

Работа с пользовательскими переводами

Для добавления собственных переводов используется объект messages при создании Vuetify:

import { createVuetify } from 'vuetify';
import ru from 'vuetify/locale/ru';

const vuetify = createVuetify({
  locale: {
    locale: 'ru',
    messages: {
      ru: {
        ...ru,
        custom: {
          hello: 'Привет, мир!'
        }
      }
    }
  }
});

В компоненте можно вызвать:

locale.t('custom.hello'); // 'Привет, мир!'

Динамическое переключение локалей

Динамическое переключение языка — одна из ключевых возможностей useLocale. Можно реализовать простой селектор:

<template>
  <v-select
    v-model="locale.current"
    :items="locale.available"
    label="Выберите язык"
  ></v-select>
</template>

<script>
export default {
  setup() {
    const locale = useLocale();
    return { locale };
  }
}
</script>

Все компоненты, использующие переводы или форматирование, моментально отражают изменение локали.

Советы по использованию

  • Для крупных проектов рекомендуется централизованно хранить ключи переводов и использовать метод t вместо хардкодированных строк.
  • Методы n и d позволяют поддерживать корректное отображение чисел и дат независимо от локали.
  • available и current помогают создавать динамические переключатели языков без дополнительных зависимостей.

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

Оглавление