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:
message
eg {{ $t('message') }}
? This const message = ref(primevue.config.currentLocale.message);
is wrong.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.