sauvagerie/components/LanguageSelector.vue

<template>
  <v-select
    v-model="locale"
    :items="items"
    :key="`locale-${locale}`"
    density="compact"
    variant="plain"
    :hide-details="true"
    class="language-selector"
  >
    <template v-slot:selection="data">
      <v-img :src="data.item.raw.logo" left :width="16" class="mr-2"/>
      <span>{{ data.item.title }}</span>
    </template>

    <template v-slot:item="{ props, item }">
      <v-list-item v-bind="props">
        <template v-slot:prepend>
          <v-img :src="item.raw.logo" :width="16" class="mr-2"/>
        </template>
      </v-list-item>
    </template>
  </v-select>
</template>

<script setup lang="ts">
  import { ref, watch } from 'vue'
  import { useI18n } from 'vue-i18n'

  const items = [
    { value: 'fr', title: 'FR', logo: '/images/logos/french_flag.svg' },
    { value: 'en', title: 'EN', logo: '/images/logos/us-uk_flag.svg' },
  ]

  const { setLocale } = useI18n()

  const locale = ref('fr')

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

<style scoped lang="scss">
.language-selector {
  max-width: 80px;
  
  :deep(.v-field) {
    flex: 0 0 auto;
  }
}

:deep(.v-field__input) {
  padding: 0;
}

:deep(.v-select__menu-icon) {
  font-size: 15px;
  margin-top: 1px;
  margin-left: 0;
}

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

:deep(.v-list-item) {
  padding: 24px;
}

:deep(.v-list-item__content) {
  display: flex;
  flex-direction: row;

  .v-avatar {
    width: 18px;
    height: 18px;
  }
}
</style>