Vue extendLocale Composable

Usage

Use the extendLocale utility to customize an existing locale by overriding specific properties or messages.

<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>

This is useful when you want to:

Create a regional variant of a language (e.g., en-AU from en)
Override specific translations without redefining the entire locale
Customize component labels for your application

Learn more about internationalization in the i18n integration documentation.

API

extendLocale<M>(locale: Locale<M>, options: Partial<DefineLocaleOptions<DeepPartial<M>>>): Locale<M>

Extends an existing locale with the provided options, deeply merging the messages.

Parameters

locale

Locale<M> required

The base locale to extend. Import from @bitrix24/b24ui-nuxt/locale.

options

Partial<DefineLocaleOptions<DeepPartial<M>>> required

The properties to override:

Returns: A new Locale<M> object with the merged properties.

Example

Here's an example extending the English locale for an Australian variant:

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

const locale = extendLocale(en, {
  name: 'English (Australia)',
  locale: 'en-AU',
  messages: {
    colorMode: {
      dark: 'Dark',
      light: 'Light',
      system: 'System'
    },
    selectMenu: {
      search: 'Search…',
      noData: 'No results found',
      noMatch: 'No matching results'
    }
  }
})
</script>

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

The extendLocale utility uses deep merging, so you only need to specify the messages you want to override. All other messages will be inherited from the base locale.

defineShortcuts

A composable to assign keyboard shortcuts in your app.

extractShortcuts

A keyboard shortcut extractor for menu items.