Appearance

Internationalization (i18n) in Nuxt Application ​

Learn how to internationalize your Nuxt app with multi-directional support (LTR/RTL) in your Nuxt application.
Nuxt UI

Usage ​

TIP

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:

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

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

Custom locale ​

You also have the option to add your own locale using defineLocale:

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

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

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

TIP

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)

Dynamic locale ​

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

1. Install the Nuxt I18n package ​

bash
pnpm add @nuxtjs/i18n
bash
yarn add @nuxtjs/i18n
bash
npm install @nuxtjs/i18n
bash
bun add @nuxtjs/i18n

2. Add the Nuxt I18n module in your nuxt.config.ts ​

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

3. Set the locale prop using useI18n ​

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:

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 ​

  • en English

  • de Deutsch

  • la Español

  • br Português (Brasil)

  • fr Français

  • it Italiano

  • pl Polski

  • ru Русский

  • ua Українська

  • tr Türkçe

  • sc 中文（简体）

  • tc 中文（繁體)

  • ja 日本語

  • vn Tiếng Việt

  • id Bahasa Indonesia

  • ms Bahasa Melayu

  • th ภาษาไทย

  • ar عربي,

  • kz Қазақша

Released under the MIT License.

Copyright © 2024-present Bitrix24