How to use the PrimeVue i18n integration?

[jtuchel]

I created a Vue 3 app using the CLI and added PrimeVue to my project. Based on https://primefaces.org/primevue/showcase/#/locale I want to setup the locales.

Inside the main.ts file I tried to setup a sample with multiple languages

Code: Select all

  .use(PrimeVue, {
    locale: {
      en: {
        message: "Message",
      },
      de: {
        message: "Nachricht",
      },
    },
  })

and this is a sample component trying to work with message based on the selected locale

Code: Select all

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="setCurrentLocaleToJapanese">Change to japanese</button>
  </div>  
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { usePrimeVue } from "primevue/config";

export default defineComponent({
  setup() {
    const primevue = usePrimeVue();

    const message = ref(primevue.config.currentLocale.message); // reactive, fallback locale?

    function setCurrentLocaleToJapanese() {
      primevue.config.currentLocale = "ja";
    }

    return { message };
  },
});
</script>

My whole code is pseudo code because I don't know the correct syntax yet. I'm struggling with multiple problems:

- How to configure a fallback locale?
- Is there something similiar to vue-i18n to access the correct translation for message eg {{ $t('message') }}? This const message = ref(primevue.config.currentLocale.message); is wrong.
- How to change the current selected locale globally?