Смена языка интерфейса

Naive UI предоставляет гибкую систему локализации, которая позволяет динамически менять язык интерфейса компонентов. Основной инструмент для этого — объект globalConfigProvider и поддержка locale через предоставляемые локали.

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

Библиотека поставляется с готовыми локалями для большинства основных языков. Локали подключаются следующим образом:

import { createApp } from 'vue'
import { createNaiveUI, NButton } from 'naive-ui'
import zhCN from 'naive-ui/es/locales/zh_CN'
import enUS from 'naive-ui/es/locales/en_US'

const naive = createNaiveUI({
  components: [NButton],
  locale: zhCN
})

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

В примере выше начальная локаль установлена на китайский. Для смены на английский достаточно передать enUS в locale.

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

Naive UI позволяет менять локаль на лету без перезагрузки страницы. Для этого используется провайдер globalConfigProvider:

import { createApp, ref } from 'vue'
import { NConfigProvider, NButton } from 'naive-ui'
import zhCN from 'naive-ui/es/locales/zh_CN'
import enUS from 'naive-ui/es/locales/en_US'

const app = createApp({
  setup() {
    const currentLocale = ref(zhCN)

    const switchLanguage = (lang) => {
      currentLocale.value = lang === 'en' ? enUS : zhCN
    }

    return { currentLocale, switchLanguage }
  },
  template: `
    <n-config-provider :locale="currentLocale">
      <n-button @click="switchLanguage('en')">English</n-button>
      <n-button @click="switchLanguage('zh')">中文</n-button>
      <n-button>Тест кнопки</n-button>
    </n-config-provider>
  `
})

app.use(NConfigProvider)
app.mount('#app')

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

  • NConfigProvider оборачивает компоненты, на которые нужно применить локаль.
  • locale принимает объект локали, который автоматически обновляет тексты компонентов.
  • Смена ref автоматически ререндерит все дочерние компоненты.

Создание пользовательской локали

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

const ruRU = {
  locale: 'ru-RU',
  global: {
    undo: 'Отменить',
    redo: 'Повторить',
    confirm: 'Подтвердить',
    cancel: 'Отмена'
  },
  Button: {
    loading: 'Загрузка...'
  }
}

После чего можно использовать её так же, как стандартные локали:

<n-config-provider :locale="ruRU">
  <n-button>Проверка</n-button>
</n-config-provider>

Совместимость с динамическими компонентами

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

  • Оборачивать все компоненты в один NConfigProvider.
  • Не создавать локали прямо в шаблоне, а хранить их в реактивных переменных.
  • Убедиться, что дочерние компоненты не используют локали напрямую, а наследуют их через NConfigProvider.

Локализация встроенных сообщений компонентов

Некоторые компоненты, например NDataTable или NInput, используют встроенные сообщения:

const ruRU = {
  DataTable: {
    filter: 'Фильтр',
    clearFilter: 'Очистить фильтр',
    selectAll: 'Выбрать всё'
  },
  Input: {
    placeholder: 'Введите текст'
  }
}

При смене locale все эти строки автоматически обновляются без дополнительного вмешательства.

Практические советы

  • Для больших проектов рекомендуется создать модуль локалей, где будут храниться все объекты локалей и функции для переключения языка.
  • Локали можно загружать динамически через import() для снижения размера основного бандла.
  • Комбинировать стандартные локали и пользовательские, чтобы не дублировать переводы и использовать готовые значения компонентов.

Система смены языка в Naive UI построена вокруг реактивности Vue и NConfigProvider, что делает её удобной для динамических приложений с мультиязычным интерфейсом.

Оглавление