How to use the PrimeVue i18n integration?

Solution 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.