cv2/components/LanguageSelector.vue

<template>
  <v-select
    v-model="locale"
    :items="items"
    :key="`locale-${locale}`"
    density="compact"
    variant="plain"
    :hide-details="true"
  />
</template>

<script setup lang="ts">
  const items = [
    { value: 'fr', title: 'FR' },
    { value: 'en', title: 'EN' },
  ]

  const { setLocale } = useI18n()

  const locale = ref('fr')

  watch(locale, () => {
    setLocale(locale.value)
  });
</script>

<style scoped lang="scss">
:deep(.v-field__input) {
  padding: 0;
}

:deep(.v-field__append-inner) {
  padding-top: 3px !important;
}

:deep(.v-select__menu-icon) {
  font-size: 13px;
  margin-top: 8px;
}

:deep(.v-list) {
  width: 72px;
}

:deep(.v-list-item) {
  padding: 24px;
}
</style>