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/components/Pages/Article.vue

@@ -77,7 +77,7 @@
           ></div>
         </div>
         <aside class="linked-materials">
-          <h3 class="field__label">Linked Materials</h3>
+          <h3 class="field__label">{{$t("materio.Linked Materials")}}</h3>
           <div class="card-list">
             <ul class="">
               <li v-for="node in content.field_linked_materials" v-bind:key="node.id">
@@ -115,6 +115,7 @@
 import router from 'vuejs/route'
 import store from 'vuejs/store'
 import { JSONAPI } from 'vuejs/api/json-axios'
+import { REST } from 'vuejs/api/rest-axios'
 import qs from 'querystring-es3'
 import Card from 'vuejs/components/Content/Card'
 
@@ -329,9 +330,9 @@ export default {
               default:
             }
             this.content[key].push(field)
+
           }
         })
-
       }
       // extract first visuel as accroche
       this.content.image_accroche = this.content.field_visuel.shift()
@@ -348,7 +349,27 @@ export default {
       this.loading = false;
       console.log('article.content',this.content);
 
+      // this.getFieldDefinition()
     },
+    // getFieldDefinition(field){
+    //   // JSONAPI.get(`field_config/${field}`)
+    //   //   .then(({ data }) => {
+    //   //     console.log('getFieldDefinition data', data)
+    //   //   })
+    //   //   .catch(( error ) => {
+    //   //       console.warn('Issue with getFieldDefinition', error)
+    //   //       Promise.reject(error)
+    //   //   })
+    //   REST.get('/entity/node_type/materiau?_format=json')
+    //     .then((data) => {
+    //       console.log('getFieldDefiintion', data)
+    //     })
+    //     .catch(error => {
+    //       console.warn('Issue with getFieldDefiintion', error)
+    //       Promise.reject(error)
+    //     })
+    //
+    // },
     onNext(){
       // console.log('clicked on next', this.prevnext.next);
       let alias = this.prevnext.next.view_node.replace(/^.?\/blabla\//g, '')

web/themes/custom/materiotheme/vuejs/components/User/UserFlags.vue

@@ -2,7 +2,7 @@
   <div id="user-flags">
     <h2
       class="mdi mdi-folder-outline"
-    >My folders ({{collsLength}})</h2>
+    >{{ $t("materio.My folders") }} ({{collsLength}})</h2>
     <ul>
       <li v-if="flagcolls" v-for="coll in flagcolls" :key="coll.id">
         <h5

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

web/themes/custom/materiotheme/vuejs/store/modules/search.js

@@ -1,5 +1,5 @@
-import { REST } from 'vuejs/api/rest-axios'
-import { JSONAPI } from 'vuejs/api/json-axios'
+// import { REST } from 'vuejs/api/rest-axios'
+// import { JSONAPI } from 'vuejs/api/json-axios'
 import { MA } from 'vuejs/api/ma-axios'
 import qs from 'querystring-es3'
 
@@ -113,7 +113,7 @@ export default {
               imgStyle: ['card_medium', 'card_full'],
               callBack: 'loadMaterialsCallBack'
             })
-          }else{
+          } else {
             commit('setNoresults')
           }
         })