Internationalization (i18n)

Bitrix24 UI supports 19 locales and multi-directional (LTR/RTL) internationalization.

Usage

Bitrix24 UI provides an App component that wraps your app to provide global configurations.

Locale

Use the locale prop with the locale you want to use from @bitrix24/b24ui-nuxt/locale:

App.vue

<script setup lang="ts">
import { fr } from '@bitrix24/b24ui-nuxt/locale'
</script>

<template>
  <B24App :locale="fr">
    <RouterView />
  </B24App>
</template>

Extend locale

You can customize an existing locale by overriding its messages using the extendLocale composable:

App.vue

<script setup lang="ts">
import { en } from '@bitrix24/b24ui-nuxt/locale'
import { extendLocale } from '@bitrix24/b24ui-nuxt/composables/defineLocale.js'

const locale = extendLocale(en, {
  messages: {
    commandPalette: {
      placeholder: 'Search a component...'
    }
  }
})
</script>

<template>
  <B24App :locale="locale">
    <RouterView />
  </B24App>
</template>

Dynamic locale

To dynamically switch between languages, you can use the Vue I18n plugin.

Install the Vue I18n package

pnpm add vue-i18n@11

yarn add vue-i18n@11

npm install vue-i18n@11

bun add vue-i18n@11

Use the Vue I18n plugin in your `main.ts`

main.ts

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import { createI18n } from 'vue-i18n'
import b24UiPlugin from '@bitrix24/b24ui-nuxt/vue-plugin'
import App from './App.vue'

const app = createApp(App)

const router = createRouter({
  routes: [],
  history: createWebHistory()
})

const i18n = createI18n({
  legacy: false,
  locale: 'en',
  availableLocales: ['en', 'de'],
  messages: {
    en: {
      // ...
    },
    de: {
      // ...
    }
  }
})

app.use(router)
app.use(i18n)
app.use(b24UiPlugin)

app.mount('#app')

Set the `locale` prop using `useI18n`

App.vue

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import * as locales from '@bitrix24/b24ui-nuxt/locale'

const { locale } = useI18n()
</script>

<template>
  <B24App :locale="locales[locale]">
    <RouterView />
  </B24App>
</template>

Dynamic direction

Each locale has a dir property which will be used by the App component to set the directionality of all components.

In a multilingual application, you might want to set the lang and dir attributes on the <html> element dynamically based on the user's locale, which you can do with the useHead composable:

App.vue

<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useHead } from '@unhead/vue'
import * as locales from '@bitrix24/b24ui-nuxt/locale'

const { locale } = useI18n()

const lang = computed(() => locales[locale.value].code)
const dir = computed(() => locales[locale.value].dir)

useHead({
  htmlAttrs: {
    lang,
    dir
  }
})
</script>

<template>
  <B24App :locale="locales[locale]">
    <RouterView />
  </B24App>
</template>

Supported languages

By default, the en locale is used.

🇸🇦

العربية

Code: ar

🇧🇷

Português (Brasil)

Code: br

🇩🇪

Deutsch

Code: de

🇺🇸

English

Code: en

🇫🇷

Français

Code: fr

🇮🇩

Bahasa Indonesia

Code: id

🇮🇹

Italiano

Code: it

🇯🇵

日本語

Code: ja

🇰🇿

Қазақша

Code: kz

🇪🇸

Español

Code: la

🇲🇸

Bahasa Melayu

Code: ms

🇵🇱

Polski

Code: pl

🇷🇺

Русский

Code: ru

🇸🇨

中文（简体）

Code: sc

🇹🇨

中文（繁體)

Code: tc

🇹🇭

ภาษาไทย

Code: th

🇹🇷

Türkçe

Code: tr

🇺🇦

Українська

Code: ua

🇻🇳

Tiếng Việt

Code: vn