materio-d9/web/themes/custom/materiotheme/vuejs/i18n/index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
// do not preload language files as they are to weight
// import * as en from 'locales/en.json'
// import * as fr from 'locales/fr.json'
import axios from 'axios'

Vue.use(VueI18n)

// const messages = {
//   en: {
//     // ...en.default
//   },
//   fr: {
//
//   }
// }

// export const i18n = new VueI18n({
//   locale: 'en',
//   fallbackLocale: 'en',
//   messages
// })

export const i18n = new VueI18n()

// const loadedLanguages = ['en'] // our default language that is preloaded
const loadedLanguages = [] // 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)
    })
}