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">
    <NuxtPage />
  </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'

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

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

Dynamic locale

To dynamically switch between languages, you can use the Nuxt I18n module.

Install the Nuxt I18n package

pnpm add @nuxtjs/i18n

yarn add @nuxtjs/i18n

npm install @nuxtjs/i18n

bun add @nuxtjs/i18n

Add the Nuxt I18n module in your `nuxt.config.ts`

nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '@bitrix24/b24ui-nuxt',
    '@nuxtjs/i18n'
  ],
  css: ['~/assets/css/main.css'],
  i18n: {
    locales: [
      {
        code: 'de',
        name: 'Deutsch'
      },
      {
        code: 'en',
        name: 'English'
      },
      {
        code: 'fr',
        name: 'Français'
      }
    ]
  }
})

Set the `locale` prop using `useI18n`

app.vue

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

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

<template>
  <B24App :locale="locales[locale]">
    <NuxtPage />
  </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 * 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]">
    <NuxtPage />
  </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

Color Mode

Bitrix24 UI integrates with VueUse to allow for easy switching between light and dark themes.

Content

Bitrix24 UI integrates with Nuxt Content to deliver beautiful typography and consistent component styling.