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

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

Импорт и настройка локалей

Все локали в Element Plus хранятся в пакете element-plus/es/locale/lang. Для подключения конкретной локали используется импорт нужного файла:

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

// Импорт русской локали
import ru from 'element-plus/es/locale/lang/ru';

const app = createApp(App);

// Применение локали через provide
app.use(ElementPlus, { locale: ru });

app.mount('#app');

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

  • Импортируется объект локали (ru) из соответствующего пути.
  • В app.use(ElementPlus, { locale: ... }) передается объект локали, который будет применяться ко всем компонентам библиотеки.
  • Локаль можно менять динамически, если приложение поддерживает мультиязычность.

Динамическая смена локали

Element Plus позволяет менять язык компонентов на лету с помощью функции useLocale. Она предоставляет возможность обновлять текущую локаль без перезагрузки приложения.

import { ElMessage } from 'element-plus';
import { setLocale } from 'element-plus/es/locale';

// Импорт дополнительных локалей
import en from 'element-plus/es/locale/lang/en';
import ru from 'element-plus/es/locale/lang/ru';

// Смена локали на английский
setLocale(en);

// Использование компонента с новой локалью
ElMessage({
  message: 'This message is in English',
  type: 'success',
});

// Смена обратно на русский
setLocale(ru);

Особенности динамической локализации:

  • Компоненты автоматически обновляют все текстовые элементы после вызова setLocale.
  • Функция setLocale работает как с предустановленными локалями, так и с кастомными объектами перевода.
  • Это особенно удобно для SPA, где пользователь может менять язык через настройки профиля.

Кастомизация локалей

Помимо стандартных языков, Element Plus позволяет создавать собственные переводы. Для этого необходимо сформировать объект с ключами, соответствующими компонентам, и передать его в конфигурацию:

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

const customLocale = {
  name: 'ru-custom',
  el: {
    colorpicker: {
      confirm: 'Применить',
      clear: 'Очистить',
    },
    datepicker: {
      now: 'Сейчас',
      today: 'Сегодня',
      cancel: 'Отмена',
    },
    // остальные компоненты по необходимости
  },
};

const app = createApp(App);
app.use(ElementPlus, { locale: customLocale });
app.mount('#app');

Рекомендации по кастомным локалям:

  • Для единообразия лучше расширять существующую локаль, а не писать с нуля.
  • Все компоненты Element Plus имеют структуру ключей в объекте el, которая строго соблюдается.
  • Можно комбинировать стандартные переводы с частичными кастомными строками.

Подключение локалей через глобальный конфиг

В больших приложениях часто используется глобальный конфиг для Vue. Локаль можно интегрировать через provide/inject:

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import ru from 'element-plus/es/locale/lang/ru';

const app = createApp(App);

app.provide('ELEMENT_LOCALE', ru);
app.use(ElementPlus);

app.mount('#app');
  • Использование provide позволяет компонентам получать локаль через inject.
  • Особенно удобно, если часть приложения использует Element Plus без глобального app.use или подключается лениво.

Поддерживаемые локали

Element Plus официально поддерживает множество языков: английский, русский, испанский, немецкий, французский, китайский и другие. Список доступных локалей находится в element-plus/es/locale/lang и может расширяться в будущих версиях.

  • Для большинства проектов достаточно использовать стандартные локали.
  • Для специфических интерфейсов рекомендуется создавать кастомные объекты перевода и комбинировать с существующими локалями.

Итоговые рекомендации по подключению локалей

  • Импортировать локаль напрямую из element-plus/es/locale/lang.
  • Применять через app.use(ElementPlus, { locale }).
  • Для мультиязычных приложений использовать setLocale для динамической смены.
  • Для уникальных текстов создавать кастомные локали с сохранением структуры объекта el.
  • Использовать provide/inject для крупных приложений с модульной архитектурой.

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

Оглавление