Usage
Use the defineLocale utility to create a custom locale with your own translations.
<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>
API
defineLocale<M>(options: DefineLocaleOptions<M>): Locale<M>
Creates a new locale object with the provided options.
Parameters
options
DefineLocaleOptions<M> required
The locale configuration object with the following properties:
name
string required
The display name of the locale (e.g.,
'English', 'Français').code
string required
The code of the locale from Bitrix24.
locale
string required
The ISO code of the locale (e.g.,
'en', 'fr', 'de-AT').dir
'ltr' | 'rtl'
The text direction of the locale. Defaults to
'ltr'.messages
M required
The translation messages object. Use the
Messages type from @bitrix24/b24ui-nuxt for type safety.Returns: A Locale<M> object that can be passed to the locale prop of the App component.
Example
Here's a complete example of creating a custom locale:
<script setup lang="ts">
import type { Messages } from '@bitrix24/b24ui-nuxt'
const locale = defineLocale<Messages>({
name: 'Español',
code: 'la',
locale: 'es',
dir: 'ltr',
messages: {
alert: {
close: 'Cerrar'
},
modal: {
close: 'Cerrar'
},
commandPalette: {
back: 'Atrás',
close: 'Cerrar',
noData: 'Sin datos',
noMatch: 'Sin resultados',
placeholder: 'Escribe un comando o busca…'
}
// ... other component messages
}
})
</script>
<template>
<B24App :locale="locale">
<NuxtPage />
</B24App>
</template>
You can look at the built-in locales for reference on how to structure the messages object.