Usage
The LocaleSelect component extends the SelectMenu component, so you can pass any property such as color, size, etc.
The flags are displayed using Unicode characters. This may result in a different display, e.g. Microsoft Edge under Windows displays the ISO 3166-1 alpha-2 code instead, as no flag icons are shipped with the OS fonts.
Locales
Use the locales prop with an array of locales from @bitrix24/b24ui-nuxt/locale.
You can pass only the locales you need in your application:
<script setup lang="ts">
import { en, es, ru, tr, ar } from '@bitrix24/b24ui-nuxt/locale'
const locale = ref('en')
</script>
<template>
<B24LocaleSelect v-model="locale" :locales="[en, es, ru, tr, ar]" />
</template>
Dynamic locale
You can use it with Nuxt i18n:
<script setup lang="ts">
import * as locales from '@bitrix24/b24ui-nuxt/locale'
const { locale, setLocale } = useI18n()
</script>
<template>
<B24LocaleSelect
:model-value="locale"
:locales="Object.values(locales)"
@update:model-value="setLocale($event)"
/>
</template>
You can use it with Vue i18n:
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import * as locales from '@bitrix24/b24ui-nuxt/locale'
const { locale, setLocale } = useI18n()
</script>
<template>
<B24LocaleSelect
:model-value="locale"
:locales="Object.values(locales)"
@update:model-value="setLocale($event)"
/>
</template>