Tengo el paquete vueI18n instalado para la localización de idiomas en la aplicación y el objeto de mensajes locales se obtiene a través de una llamada API. Tengo un archivo de configuración donde se especifica el idioma predeterminado y en función del cual se cargará la configuración regional antes de crear app.vue. es decir; Estoy cargando la configuración regional en el método beforeCreate lifecycle. Pero aún así el texto no se carga correctamente.
Inicialmente, el objeto del mensaje es nulo porque, según la configuración del usuario, buscamos el idioma y cargamos los mensajes. Supongo que el objeto vacío inicial está causando el problema.
¿Alguien podría sugerir una forma en que podamos retrasar la carga de la página hasta que confirmemos que el objeto del mensaje se cargue correctamente?
import Vue from 'vue' import VueI18n from 'vue-i18n' import userConfig from './userConfig' import apiService from '@/service/apiService.js' let selectedLanguage = '' Vue.use(VueI18n) const loadLocaleMessages = async (lang) => { const messages = await apiService.getLocale(lang) return messages } export const i18n = new VueI18n({ locale: selectedLanguage, fallbackLocale: userConfig.defaultLocalizationKey, formatFallbackMessages: true, messages: {} }) export const loadLanguage = async lang => { const messages = await loadLocaleMessages(lang) selectedLanguage = lang return i18n.setLocaleMessage(selectedLanguage, messages[lang]) } async beforeCreate () { await loadLanguage(this.$userConfig.defaultLocalizationKey) this.$i18n.locale = this.$userConfig.defaultLocalizationKey }La buena práctica es tener siempre un idioma predeterminado/alternativo dentro de vue-i18n , por ejemplo, inglés. Si no puede hacer esto por cualquier motivo, simplemente puede poner un v-if en la plantilla de la aplicación para que no se represente nada hasta que obtenga al menos 1 idioma en vue-i18n .