i18n в Naive UI

Naive UI предоставляет встроенную поддержку интернационализации (i18n), позволяя легко адаптировать компоненты под различные языки. На уровне библиотеки предусмотрены стандартные словари для основных компонентов, таких как кнопки, модальные окна, уведомления, календарь и прочие элементы интерфейса.

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

Для работы с локалями необходимо импортировать соответствующие словари из пакета naive-ui/es/locales. Каждый словарь представляет собой объект с ключами, соответствующими текстовым сообщениям компонента. Пример подключения локали для русского языка:

import { createApp } from 'vue'
import { createNaiveUi } from 'naive-ui'
import ruRU from 'naive-ui/es/locales/ru-RU'

const naive = createNaiveUi({
  locale: ruRU
})

const app = createApp(App)
app.use(naive)
app.mount('#app')

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

  • Каждый словарь экспортируется отдельно, что позволяет подключать только необходимые локали.
  • Локаль применяется ко всем компонентам библиотеки глобально при передаче в объект locale.

Использование NConfigProvider для динамической смены языка

Для более гибкого управления локалями можно использовать компонент NConfigProvider. Он позволяет задавать локаль на уровне всего приложения или отдельной части интерфейса. Пример:

<template>
  <n-config-provider :locale="currentLocale">
    <n-button>{{ $t('confirm') }}</n-button>
    <n-modal :title="$t('modalTitle')" :show="showModal">
      {{ $t('modalContent') }}
    </n-modal>
  </n-config-provider>
</template>

<script>
import { ref } from 'vue'
import { NConfigProvider } from 'naive-ui'
import enUS from 'naive-ui/es/locales/en-US'
import ruRU from 'naive-ui/es/locales/ru-RU'

export default {
  components: { NConfigProvider },
  setup() {
    const currentLocale = ref(ruRU)
    const showModal = ref(false)
    
    function switchLocale() {
      currentLocale.value = currentLocale.value === ruRU ? enUS : ruRU
    }

    return { currentLocale, showModal, switchLocale }
  }
}
</script>

Особенности работы с NConfigProvider:

  • Локаль можно менять динамически без перезагрузки приложения.
  • Все дочерние компоненты автоматически используют локализованные строки.
  • Поддерживается вложенность: локаль на уровне дочернего NConfigProvider переопределяет глобальную.

Структура словарей и кастомизация

Стандартные словари Naive UI имеют иерархическую структуру, разделённую по компонентам:

{
  global: {
    undo: 'Отменить',
    redo: 'Повторить',
  },
  datePicker: {
    year: 'Год',
    month: 'Месяц',
    day: 'День',
  },
  dialog: {
    ok: 'ОК',
    cancel: 'Отмена',
  }
}
  • global — общие термины, используемые во многих компонентах.
  • Каждая категория соответствует компоненту, что облегчает частичное переопределение текстов.

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

import ruRU from 'naive-ui/es/locales/ru-RU'

const customRu = {
  ...ruRU,
  global: {
    ...ruRU.global,
    submit: 'Отправить'
  }
}

Локализация через функцию t

Для некоторых компонентов Naive UI предоставляет возможность передачи функции t, которая используется для получения локализованных строк. Это особенно полезно, если необходимо подставлять динамические значения:

<n-message :content="t('greeting', { name: 'Иван' })" />

Где t может быть функцией, реализованной через vue-i18n или аналогичную библиотеку, при этом словари Naive UI будут использоваться как источник перевода по умолчанию.

Интеграция с внешними i18n решениями

Naive UI легко интегрируется с библиотеками vue-i18n и другими решениями для интернационализации. Для этого достаточно передавать в NConfigProvider функцию t, которая обрабатывает ключи перевода. Пример:

import { createI18n } from 'vue-i18n'
import { NConfigProvider } from 'naive-ui'
import ruRU from 'naive-ui/es/locales/ru-RU'

const i18n = createI18n({
  locale: 'ru',
  messages: {
    ru: { greeting: 'Привет, {name}!' },
    en: { greeting: 'Hello, {name}!' }
  }
})

<n-config-provider :locale="ruRU" :t="i18n.global.t">
  <n-button>{{ i18n.global.t('greeting', { name: 'Иван' }) }}</n-button>
</n-config-provider>

Преимущества такого подхода:

  • Синхронизация всех компонентов с глобальной системой перевода.
  • Возможность использовать placeholders и динамические значения.
  • Сохранение стандартных переводов Naive UI при частичной кастомизации.

Поддержка RTL и региональных особенностей

Некоторые локали требуют изменения направления текста (LTR/RTL) или форматирования дат и чисел. Naive UI учитывает это через свойство locale:

  • Свойство direction в словаре позволяет переключать направление текста.
  • Форматы дат и чисел могут быть расширены через кастомные функции dateLocale и numberLocale.

Пример:

const arLocale = {
  ...arAE, // стандартная арабская локаль
  direction: 'rtl'
}

Компоненты автоматически адаптируются к направлению текста.

Итоговая структура i18n в Naive UI

  1. Глобальная локаль — передается при создании приложения или через NConfigProvider.
  2. Дочерние локали — могут переопределять глобальные на уровне части интерфейса.
  3. Кастомизация словарей — через расширение стандартных объектов.
  4. Функция t — интеграция с внешними библиотеками перевода.
  5. Поддержка RTL и региональных форматов — через дополнительные свойства в словаре.

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

Оглавление