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?

archivo de configuración vueI18

 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]) }

aplicación.vue

 async beforeCreate () { await loadLanguage(this.$userConfig.defaultLocalizationKey) this.$i18n.locale = this.$userConfig.defaultLocalizationKey }