Creé una aplicación Vue 3 usando la CLI y agregué PrimeVue a mi proyecto. Según los documentos , quiero configurar los locales.
Dentro del archivo main.ts intenté configurar una muestra con varios idiomas
.use(PrimeVue, { locale: { en: { message: "Message", }, ja: { message: "メッセージ", }, de: { message: "Nachricht", }, }, })
y este es un componente de muestra que intenta trabajar con message
basado en la configuración regional seleccionada
<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>
Todo mi código es pseudocódigo porque aún no conozco la sintaxis correcta. Estoy luchando con varios problemas:
message
por ejemplo, {{ $t('message') }}
? Este const message = ref(primevue.config.currentLocale.message);
Está Mal.De acuerdo con la documentación que vinculó, no hay anidamiento por configuración regional en .use(PrimeVue, {})
.
Por lo tanto, debe declarar sus valores predeterminados como:
.use(PrimeVue, { locale: { emptyFilterMessage: 'There is no records', } }
Ahora, cuando desee cambiar la configuración regional, debe anular todas las configuraciones regionales como se indica en la documentación:
const primevue = usePrimeVue(); primevue.config.locale.emptyFilterMessage = 'I wish there were some records';
¿Cómo configurar una configuración regional alternativa?
No parece haber ningún mecanismo para tener una configuración regional alternativa. Pero puedes simular esto, de hecho, si usas Object.assign
puedes tener algo como:
primevue.config.locale = Object.assign( {}, en, // fallback, an object like { emptyFilterMessage: 'Empty', emptyMessage: 'empty...' } de, // locale, an object like { emptyFilterMessage: 'Leer' } );
Nota: El en
y de
podrían resultar de import
s.
¿Hay algo similar a vue-i18n para acceder a la traducción correcta?
Puede usar primevue.config.locale.<key>
directamente en su plantilla, como:
<template> <p>{{ primevue.config.locale.emptyFilterMessage }}</p> </template>
¿Cómo cambiar globalmente la configuración regional actual seleccionada?
Le aconsejaría que use una tienda (generalmente Vuex) para lograr esto.
La idea es que cuando cambie a otra configuración regional, la tienda será responsable de actualizar primevue.config.locale
, por lo que toda su aplicación actualizará sus mensajes.