How to use the PrimeVue i18n integration?

Question

I created a Vue 3 app using the CLI and added PrimeVue to my project. Based on the docs I want to setup the locales.

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

  .use(PrimeVue, {
    locale: {
      en: {
        message: "Message",
      },
      ja: {
        message: "メッセージ",
      },
      de: {
        message: "Nachricht",
      },
    },
  })

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

<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?

Answer 1

According to the documentation that you linked, there is no nesting per locale in the .use(PrimeVue, {}).

So you have to declare your defaults as:

.use(PrimeVue, {
    locale: {
        emptyFilterMessage: 'There is no records',
    }
}

Now, when you want to switch locale you have to override every locale as stated in the documentation:

const primevue = usePrimeVue();
primevue.config.locale.emptyFilterMessage = 'I wish there were some records';

How to configure a fallback locale?

There does not seem to have any mechanism to have a fallback locale. But you can simulate this, in fact if you use Object.assign you can have something like:

primevue.config.locale = Object.assign(
  {},
  en, // fallback, an object like { emptyFilterMessage: 'Empty', emptyMessage: 'empty...' }
  de, // locale, an object like { emptyFilterMessage: 'Leer' }
);

Note: The en and de could results from imports.

Is there something similiar to vue-i18n to access the correct translation ?

You can use primevue.config.locale.<key> directly in your template, such as:

<template>
  <p>{{ primevue.config.locale.emptyFilterMessage }}</p>
</template>

How to change the current selected locale globally ?

I would advise you to use a store (usually Vuex) in order to achieve this.

The idea being that when you switch to another locale, the store will be responsible to update primevue.config.locale, so your whole app will update its messages.