LocaleSelectPRO

SelectMenuGitHub
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.
This component is meant to be used with the i18n system. Learn more about it in the guide.

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 } = useI18n()
</script>

<template>
  <ULocaleSelect v-model="locale" :locales="Object.values(locales)" />
</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 } = useI18n()
</script>

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

API

Props

Prop Default Type
locales

Locale<any>[]

disabled

boolean

When true, prevents the user from interacting with listbox

content

{ side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }

ComboboxContentProps & Partial<EmitsToProps<DismissableLayerEmits>>

The content of the menu.

size

'md'

"xs" | "sm" | "md" | "lg" | "xl"

color

'primary'

"error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"

trailingIcon

appConfig.ui.icons.chevronDown

string

The icon displayed to open the menu.

variant

'outline'

"outline" | "soft" | "subtle" | "ghost" | "none"

selectedIcon

appConfig.ui.icons.check

string

The icon displayed when an item is selected.

arrow

false

boolean | ComboboxArrowProps

Display an arrow alongside the menu.

portal

true

boolean

Render the menu in a portal.

modelValue

string

ui

PartialString<{ base: string[]; leading: string; leadingIcon: string; leadingAvatar: string; leadingAvatarSize: string; trailing: string; trailingIcon: string; value: string; placeholder: string; arrow: string; ... 16 more ...; focusScope: string; }>

Link

A wrapper around <NuxtLink> with extra props.

Main

A main element that fills the available viewport height.