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>

Custom locale

You can create your own locale using the defineLocale utility:

app.vue

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

const locale = defineLocale<Messages>({
  name: 'My custom locale',
  code: 'en',
  locale: 'en-AU',
  dir: 'ltr',
  messages: {
    // implement pairs
  }
})
</script>

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

Look at the locale parameter, there you need to pass the iso code of the language. Example:

hi Hindi (language)
de-AT: German (language) as used in Austria (region)

Extend locale

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

app.vue

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

const locale = extendLocale(en, {
  locale: 'en-AU',
  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].locale)
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 | Locale: ar

🇧🇷

Português (Brasil)

Code: br | Locale: pt-BR

🇩🇪

Deutsch

Code: de | Locale: de

🇺🇸

English

Code: en | Locale: en

🇫🇷

Français

Code: fr | Locale: fr

🇮🇩

Bahasa Indonesia

Code: id | Locale: id

🇭🇮

Indian

Code: in | Locale: hi_IN

🇮🇹

Italiano

Code: it | Locale: it

🇯🇵

日本語

Code: ja | Locale: ja

🇰🇿

Қазақша

Code: kz | Locale: kk

🇪🇸

Español

Code: la | Locale: es

🇲🇸

Bahasa Melayu

Code: ms | Locale: ms

🇵🇱

Polski

Code: pl | Locale: pl

🇷🇺

Русский

Code: ru | Locale: ru

🇨🇳

中文（简体）

Code: sc | Locale: zh-CN

🇹🇼

中文（繁體)

Code: tc | Locale: zh-TW

🇹🇭

ภาษาไทย

Code: th | Locale: th

🇹🇷

Türkçe

Code: tr | Locale: tr

🇺🇰

Українська

Code: ua | Locale: uk

🇻🇮

Tiếng Việt

Code: vn | Locale: vi

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.