Localization

Built-in texts of the components (Close, Next, Search, validation messages, dates) have their own translator. It does not depend on the i18n library of your app, so it works the same in Vue, Nuxt and React.

Languages

English, Arabic and Russian are included in @ziyarago/ui. The other 13 come with the Pro language pack. A language without strings shows English, nothing breaks.

Switch the language

import { setUiLocale } from '@ziyarago/ui/i18n'
setUiLocale('ru')                    // components re-render by themselves

// with the theme controller: also sets <html lang> and dir (rtl for ar, fa, ur) and remembers the choice
import { useUiTheme } from '@ziyarago/ui/vue'   // or '@ziyarago/ui/react'
useUiTheme().setLocale('ar')

Override single texts

import { setUiMessages } from '@ziyarago/ui/i18n'
setUiMessages('ru', { Pagination: { prev: 'Назад', next: 'Вперёд' } })   // wins over the built-in text
setUiMessages('ru', null)                                               // clear overrides for a locale

Which text wins:

1. a prop of the component (labels, label, placeholder, ariaLabel ...)
2. setUiMessages(locale, ...) from your app
3. the built-in text for the current locale
4. English

Sync with vue-i18n

// vue-i18n: follow the app language
import { watch } from 'vue'
import { setUiLocale } from '@ziyarago/ui/i18n'
watch(() => i18n.global.locale.value, l => setUiLocale(l), { immediate: true })

Pro language pack

Install @ziyarago/ui-pro/languages (private, access after purchase), import it once and use the codes above.

import '@ziyarago/ui-pro/languages'       // Pro pack: once, before mount
import { setUiLocale } from '@ziyarago/ui/i18n'
setUiLocale('uz')

Texts per component

33 components have built-in texts. Use the keys below with setUiMessages. Components not listed have no default texts.