fully integrated vue-i18n with embeded en messages and async loaded current language translation exported by strings_translation_export_json

web/themes/custom/materiotheme/vuejs/i18n/index.js

@@ -1,20 +1,50 @@
 import Vue from 'vue'
 import VueI18n from 'vue-i18n'
-import * as en from './en.json'
-import * as fr from './fr.json'
+import * as en from 'locales/en.json'
+import axios from 'axios'
+// import * as fr from 'locales/fr.json'
 
 Vue.use(VueI18n)
 
 const messages = {
   en: {
     ...en.default
-  },
-  fr: {
-    ...fr.default
   }
 }
 
-export default new VueI18n({
+export const i18n = new VueI18n({
   locale: 'en',
+  fallbackLocale: 'en',
   messages
 })
+
+const loadedLanguages = ['en'] // our default language that is preloaded
+
+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 the same language
+  if (i18n.locale === lang) {
+    return Promise.resolve(setI18nLanguage(lang))
+  }
+
+  // If the language was already loaded
+  if (loadedLanguages.includes(lang)) {
+    return Promise.resolve(setI18nLanguage(lang))
+  }
+
+  // If the language hasn't been loaded yet
+  // return import(/* webpackChunkName: "lang-[request]" */ `sites/default/files/lang/${lang}.json`).then(
+  return axios.get(`/sites/default/files/lang/${lang}.json`)
+    .then(({ data }) => {
+      console.log(`webpack import ${lang} messages`, data)
+      i18n.setLocaleMessage(lang, data)
+      loadedLanguages.push(lang)
+      return setI18nLanguage(lang)
+    })
+}