htwkalender-pwa/frontend/src/components/LocaleSwitcher.vue

<script lang="ts" setup>
import i18n, { supportedLocales } from "../i18n";
import { Ref, ref } from "vue";
import router from "../router";
import { useI18n } from "vue-i18n";

const locales = ref(
  Object.keys(supportedLocales).map((code) => ({
    code,
    name: supportedLocales[code].name,
  })),
);

// selectedLocal is the string of the selected locale from i18n matched with the locales array
const selectedLocale: Ref<any> = ref();

const i18n1 = (i18n.vueI18n);

function onLocaleChange() {
  const newLocale: string = selectedLocale.value.code;

  // If the selected locale is the same as the
  // active one, do nothing
  if (newLocale === i18n.vueI18n.global.locale) {
    return;
  }
  i18n1.global.locale = newLocale;
  router.push(`/${newLocale}`);
}
</script>
<template>
  <Dropdown
    :options="locales"
    optionLabel="name"
    v-model="selectedLocale"
    @change="onLocaleChange"
  >
  </Dropdown>
</template>