Nuxt UI i18n language switcher

nuxt-ui-i18n-language-switcher.vue

<template>
  <USelectMenu
    v-model="$i18n.locale"
    :options="availableLocales"
    variant="none"
    size="md"
    :popper="{ arrow: false }"
    :ui="{ option: { container: 'flex items-center gap-2 min-w-max' } }">
    <template #leading>
      <UIcon name="i-heroicons-language" class="w-5 h-5" />
    </template>
    <template #label>
      <span v-if="$i18n.locale" class="ml-1 truncate">{{
        languageNames.of($i18n.locale)
      }}</span>
    </template>
    <template #option="{ option: lang }">
      <ULink
        :to="switchLocalePath(lang.code)"
        active-class="min-w-full truncate w-full inline-flex"
        inactive-class="min-w-full truncate w-full inline-flex">
        {{ lang.name }}
      </ULink>
    </template>
  </USelectMenu> 
</template>
  
  <script setup>
const { locale, locales } = useI18n();
const switchLocalePath = useSwitchLocalePath();

const availableLocales = computed(() => {
  return locales.value.filter((i) => i.code !== locale.value);
});

const langs = locales.value.map((obj) => obj.code);

const languageNames = new Intl.DisplayNames(langs, {
  type: "language",
});
</script>