refactor: use Nuxt 4 directory structure

app/components/LangSwitcher.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+  const { locale: globalLocale, availableLocales, t, setLocale } = useI18n()
+
+  export type Locale = (typeof globalLocale)['value']
+  export type AvailableLocales = Locale[]
+
+  const props = defineProps<{
+    /** Override display locale */
+    value?: Locale
+    /** If true, it will not change global locales */
+    private?: boolean
+  }>()
+
+  const emit = defineEmits<{
+    (e: 'update', value: Locale): void
+  }>()
+
+  const localeOptions = availableLocales.map((locale) => ({
+    value: locale,
+    label: t('language', {}, { locale }),
+  }))
+
+  function changeLocale(l: Locale) {
+    emit('update', l)
+    if (props.private) return
+    setLocale(l)
+  }
+</script>
+
+<template>
+  <USelect
+    icon="i-lucide-languages"
+    :model-value="value ?? globalLocale"
+    :items="localeOptions"
+    @update:model-value="changeLocale($event)"
+  />
+</template>