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 import
s.
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.