I'm currently exploring ways to fetch translation files from a server and make them accessible across all components of the project.
For instance, I can request to obtain this JSON:
{
"DASHBOARD_SETTINGS": "Einstellungen",
"DASHBOARD_CUSTOMERS": "Kunden",
"DASHBOARD_CAMPAIGNS": "Kampagnen",
"DASHBOARD_LOCATIONS": "Standorte",
"DASHBOARD_DISPLAYS": "Displays"
}
This illustrates my file structure:
- router.js
- i18n_setup.js
- app.js
- components
- Dashboard.vue
i18n_setup.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
export const i18n = new VueI18n({
locale: 'de',
fallbackLocale: 'en'
})
const loadedLanguages = ['de']
function setI18nLanguage (lang) {
i18n.locale = lang
axios.defaults.headers.common['Accept-Language'] = lang
document.querySelector('html').setAttribute('lang', lang)
return lang
}
export function loadLanguageAsync (lang) {
if (typeof lang === 'undefined') {
lang = window.navigator.userLanguage || window.navigator.language;
lang = lang.slice(0,2);
}
if (loadedLanguages.includes(lang)) {
if (i18n.locale !== lang) setI18nLanguage(lang)
return Promise.resolve()
}
return fetch(`https://EXAMPLE.de/locales?lang=${lang}`)
.then(response => {
let msgs = response.data
loadedLanguages.push(lang)
i18n.setLocaleMessage(lang, msgs)
return setI18nLanguage(lang)
});
}
router.js
...
router.beforeEach((to, from, next) => {
const lang = to.params.lang
loadLanguageAsync(lang).then(() => next())
})
app.js
...
// i18n
import { i18n } from './i18n_setup'
...
const app = new Vue({
store,
i18n,
el: '#app',
components: {
App
},
router
});
Dashboard.vue
import { loadLanguageAsync } from '../i18n_setup'
While I can observe the translations being fetched in the network tab of the browser, attempting to access a translation using something like {{ $t('DASHBOARD_SETTINGS') }} triggers a warning/error:
[vue-i18n] Cannot translate the value of keypath 'DASHBOARD_SETTINGS'. Use the value of keypath as default.
Any insights into what might be missing here?