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

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

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

API

Props

Prop	Default	Type
`modelValue`		`string`
`locales`		`Locale<any>[]`
`name`		`string` The name of the field. Submitted with its owning form as part of a name/value pair.
`avatar`		`AvatarProps` Display an avatar on the left side.
`size`	`'md'`	`"md" \| "xs" \| "sm" \| "lg" \| "xl"`
`loading`		`boolean` When `true`, the loading icon will be displayed.
`icon`		`string \| object` Display an icon based on the `leading` and `trailing` props.
`color`	`'primary'`	`"error" \| "primary" \| "secondary" \| "success" \| "info" \| "warning" \| "neutral"`
`autofocus`		`boolean`
`disabled`		`boolean` When `true`, prevents the user from interacting with listbox
`open`		`boolean` The controlled open state of the Combobox. Can be binded with with `v-model:open`.
`defaultOpen`		`boolean` The open state of the combobox when it is initially rendered. Use when you do not need to control its open state.
`resetSearchTermOnBlur`	`true`	`boolean` Whether to reset the searchTerm when the Combobox input blurred
`resetSearchTermOnSelect`	`true`	`boolean` Whether to reset the searchTerm when the Combobox value is selected
`highlightOnHover`		`boolean` When `true`, hover over item will trigger highlight
`defaultValue`		`string` The value of the SelectMenu when initially rendered. Use when you do not need to control the state of the SelectMenu.
`multiple`		`false` Whether multiple options can be selected or not.
`required`		`boolean`
`id`		`string`
`placeholder`		`string` The placeholder text when the select is empty.
`searchInput`	`false`	`boolean \| InputProps<AcceptableValue>` Whether to display the search input or not. Can be an object to pass additional props to the input. `{ placeholder: 'Search...', variant: 'none' }`
`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.
`virtualize`	`false`	`boolean \| { overscan?: number ; estimateSize?: number \| undefined; } \| undefined` Enable virtualization for large lists. Note: when enabled, all groups are flattened into a single list due to a limitation of Reka UI (https://github.com/unovue/reka-ui/issues/1885).
`valueKey`	`'code'`	`"code"` When `items` is an array of objects, select the field to use as the value instead of the object itself.
`labelKey`	`'name'`	"name" \| "code" \| "dir" \| "messages" \| `messages.${string}` When `items` is an array of objects, select the field to use as the label.
`descriptionKey`	`'description'`	"name" \| "code" \| "dir" \| "messages" \| `messages.${string}` When `items` is an array of objects, select the field to use as the description.
`highlight`		`boolean` Highlight the ring color like a focus state.
`createItem`	`false`	`boolean \| "always" \| { position?: "top" \| "bottom" ; when?: "empty" \| "always" \| undefined; } \| undefined` Determines if custom user input that does not exist in options can be added.
`filterFields`	`[labelKey]`	`string[]` Fields to filter items by.
`ignoreFilter`	`false`	`boolean` When `true`, disable the default filters, useful for custom filtering (useAsyncData, useFetch, etc.).
`autofocusDelay`		`number`
`leading`		`boolean` When `true`, the icon will be displayed on the left side.
`leadingIcon`		`string \| object` Display an icon on the left side.
`trailing`		`boolean` When `true`, the icon will be displayed on the right side.
`loadingIcon`	`appConfig.ui.icons.loading`	`string \| object` The icon when the `loading` prop is `true`.
`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

33315 — feat: add Albanian language (#5461)

5b177 — feat: extend native HTML attributes (#5348)

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

ColorModeSwitch

A switch to toggle between light and dark mode.