LocaleSelect

A Select to switch between locales.

Usage

The LocaleSelect component extends the SelectMenu component, so you can pass any property such as color, variant, size, etc.

This component is meant to be used with the i18n system. Learn more about it in the guide.

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 @nuxt/ui/locale.

<script setup lang="ts">
import * as locales from '@nuxt/ui/locale'

const locale = ref('en')
</script>

<template>
  <ULocaleSelect v-model="locale" :locales="Object.values(locales)" class="w-48" />
</template>

You can pass only the locales you need in your application:

<script setup lang="ts">
import { en, es, fr } from '@nuxt/ui/locale'

const locale = ref('en')
</script>

<template>
  <ULocaleSelect v-model="locale" :locales="[en, es, fr]" />
</template>

Dynamic locale

You can use it with Nuxt i18n:

<script setup lang="ts">
import * as locales from '@nuxt/ui/locale'

const { locale, setLocale } = useI18n()
</script>

<template>
  <ULocaleSelect
    v-model="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 '@nuxt/ui/locale'

const { locale, setLocale } = useI18n()
</script>

<template>
  <ULocaleSelect
    v-model="locale"
    :locales="Object.values(locales)"
    @update:model-value="setLocale($event)"
  />
</template>

API

Props

Prop	Default	Type
`locales`		`Locale<any>[]`
`size`	`'md'`	`"md" \| "xs" \| "sm" \| "lg" \| "xl"`
`color`	`'primary'`	`"error" \| "primary" \| "secondary" \| "success" \| "info" \| "warning" \| "neutral"`
`variant`	`'outline'`	`"outline" \| "soft" \| "subtle" \| "ghost" \| "none"`
`trailingIcon`	`appConfig.ui.icons.chevronDown`	`string \| object` The icon displayed to open the menu.
`selectedIcon`	`appConfig.ui.icons.check`	`string \| object` The icon displayed when an item is selected.
`content`	`{ side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }`	`ComboboxContentProps & Partial<EmitsToProps<DismissableLayerEmits>>` The content of the menu.
`arrow`	`false`	`boolean \| ComboboxArrowProps` Display an arrow alongside the menu.
`portal`	`true`	`string \| false \| true \| HTMLElement` Render the menu in a portal.
`disabled`		`boolean` When `true`, prevents the user from interacting with listbox
`modelValue`		`string`
`ui`		{ base?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailing?: ClassNameValue; trailingIcon?: ClassNameValue; value?: ClassNameValue; placeholder?: ClassNameValue; arrow?: ClassNameValue; content?: ClassNameValue; viewport?: ClassNameValue; group?: ClassNameValue; empty?: ClassNameValue; label?: ClassNameValue; separator?: ClassNameValue; item?: ClassNameValue; itemLeadingIcon?: ClassNameValue; itemLeadingAvatar?: ClassNameValue; itemLeadingAvatarSize?: ClassNameValue; itemLeadingChip?: ClassNameValue; itemLeadingChipSize?: ClassNameValue; itemTrailing?: ClassNameValue; itemTrailingIcon?: ClassNameValue; itemWrapper?: ClassNameValue; itemLabel?: ClassNameValue; itemDescription?: ClassNameValue; input?: ClassNameValue; focusScope?: ClassNameValue; }

Changelog

5cb65 — feat: import @nuxt/ui-pro components

ColorModeSwitch

A switch to toggle between light and dark mode.