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

build/webpack.config.base.js

@@ -14,7 +14,9 @@ module.exports = {
       'vue': 'vue/dist/vue.js',
       'theme': utils.resolve(themePath),
       'vuejs': utils.resolve(themePath+'/vuejs'),
-      'assets': utils.resolve(themePath+'/assets')
+      'assets': utils.resolve(themePath+'/assets'),
+      // locales are exported by strings_i18n_json_export from drupal
+      'locales': utils.resolve('web/sites/default/files/lang')
     }
   },
   entry: {
@@ -40,11 +42,11 @@ module.exports = {
         test: /\.vue$/,
         use: 'vue-loader'
       },
-      {
+      // {
-        resourceQuery: /blockType=i18n/,
+      //   resourceQuery: /blockType=i18n/,
-        type: 'javascript/auto',
+      //   type: 'javascript/auto',
-        loader: '@kazupon/vue-i18n-loader'
+      //   loader: '@kazupon/vue-i18n-loader'
-      },
+      // },
       {
         test: /\.js$/,
         use: {

config/sync/core.extension.yml

@@ -82,6 +82,7 @@ module:
   flag: 0
   flag_lists: 0
   genpass: 0
+  graphql: 0
   help: 0
   honeypot: 0
   image: 0

config/sync/language.types.yml

@@ -14,6 +14,7 @@ negotiation:
       language-url-fallback: 1
   language_interface:
     enabled:
+      language-graphql: -999
       language-url: 0
 _core:
   default_config_hash: dqouFqVseNJNvEjsoYKxbinFOITuCxYhi4y2OTNQP_8

config/sync/language/fr/core.entity_form_display.commerce_order.default.default.yml

@@ -0,0 +1,5 @@
+content:
+  order_items:
+    settings:
+      label_singular: 'élément de commande'
+      label_plural: 'éléments de commande'

config/sync/language/fr/core.entity_form_display.commerce_order.recurring.default.yml

@@ -0,0 +1,5 @@
+content:
+  order_items:
+    settings:
+      label_singular: 'élément de commande'
+      label_plural: 'éléments de commande'

config/sync/language/fr/field.field.node.materiau.field_linked_materials.yml

@@ -0,0 +1 @@
+description: 'Materiaux Liés'

config/sync/language/fr/pagerer.style.adaptive.yml

@@ -3,8 +3,10 @@ default_config:
     page_breaker: …
     pages:
       prefix_label: Page
+      first: «
       previous: ‹
       next: ›
+      last: »
       page_current_title: 'Page courante'
       page_title: 'Aller à la page @number'
       first_title: 'Aller à la première page'
@@ -19,12 +21,16 @@ default_config:
       last_reader: 'Dernière page'
     items:
       prefix_label: Élément
+      first: «
       previous: ‹
       next: ›
+      last: »
       page_reader: Élément
       first_reader: 'Premier élément'
     item_ranges:
       prefix_label: Éléments
+      first: «
       previous: ‹
       next: ›
+      last: »
       page_reader: Éléments

config/sync/language/fr/pagerer.style.basic.yml

@@ -1,8 +1,10 @@
 default_config:
   tags:
     pages:
+      first: «
       previous: ‹
       next: ›
+      last: »
       first_title: 'Aller à la première page'
       previous_title: 'Aller à la page précédente'
       next_title: 'Aller à la page suivante'
@@ -12,9 +14,13 @@ default_config:
       next_reader: 'Page suivante'
       last_reader: 'Dernière page'
     items:
+      first: «
       previous: ‹
       next: ›
+      last: »
       first_reader: 'Premier élément'
     item_ranges:
+      first: «
       previous: ‹
       next: ›
+      last: »

config/sync/language/fr/pagerer.style.mini.yml

@@ -2,8 +2,10 @@ default_config:
   tags:
     pages:
       prefix_label: Page
+      first: «
       previous: ‹
       next: ›
+      last: »
       page_current_title: 'Page courante'
       first_title: 'Aller à la première page'
       previous_title: 'Aller à la page précédente'
@@ -16,6 +18,8 @@ default_config:
       last_reader: 'Dernière page'
     items:
       prefix_label: Élément
+      first: «
       previous: ‹
       next: ›
+      last: »
       first_reader: 'Premier élément'

config/sync/language/fr/pagerer.style.progressive.yml

@@ -3,8 +3,10 @@ default_config:
     page_breaker: …
     pages:
       prefix_label: Page
+      first: «
       previous: ‹
       next: ›
+      last: »
       page_current_title: 'Page courante'
       page_title: 'Aller à la page @number'
       first_title: 'Aller à la première page'
@@ -19,12 +21,16 @@ default_config:
       last_reader: 'Dernière page'
     items:
       prefix_label: Élément
+      first: «
       previous: ‹
       next: ›
+      last: »
       page_reader: Élément
       first_reader: 'Premier élément'
     item_ranges:
       prefix_label: Éléments
+      first: «
       previous: ‹
       next: ›
+      last: »
       page_reader: Éléments

config/sync/language/fr/pagerer.style.scrollpane.yml

@@ -2,8 +2,10 @@ default_config:
   tags:
     pages:
       prefix_label: Page
+      first: «
       previous: ‹
       next: ›
+      last: »
       page_current_title: 'Page courante'
       page_title: 'Aller à la page @number'
       first_title: 'Aller à la première page'
@@ -18,12 +20,16 @@ default_config:
       last_reader: 'Dernière page'
     items:
       prefix_label: Élément
+      first: «
       previous: ‹
       next: ›
+      last: »
       page_reader: Élément
       first_reader: 'Premier élément'
     item_ranges:
       prefix_label: Éléments
+      first: «
       previous: ‹
       next: ›
+      last: »
       page_reader: Éléments

config/sync/language/fr/pagerer.style.slider.yml

@@ -2,8 +2,10 @@ default_config:
   tags:
     pages:
       prefix_label: Page
+      first: «
       previous: ‹
       next: ›
+      last: »
       page_current_title: 'Page courante'
       first_title: 'Aller à la première page'
       previous_title: 'Aller à la page précédente'
@@ -16,10 +18,14 @@ default_config:
       last_reader: 'Dernière page'
     items:
       prefix_label: Élément
+      first: «
       previous: ‹
       next: ›
+      last: »
       first_reader: 'Premier élément'
     item_ranges:
       prefix_label: Éléments
+      first: «
       previous: ‹
       next: ›
+      last: »

config/sync/language/fr/search_api_solr.solr_request_handler.request_handler_spell_default_7_0_0.yml

@@ -0,0 +1 @@
+label: 'Vérification orthographique'

config/sync/language/fr/views.view.commerce_orders.yml

@@ -25,6 +25,7 @@ display:
         commerce_order_bulk_form:
           action_title: 'Pour cette sélection'
         order_number:
+          label: '#'
           separator: ', '
         placed:
           label: Date

web/themes/custom/materiotheme/assets/scripts/main.js

@@ -29,7 +29,7 @@ import router from 'vuejs/route'
 // import VueI18n from 'vue-i18n'
 // Vue.use(VueI18n)
 // import * as Locales from 'assets/i18n/locales.json'
-import i18n from 'vuejs/i18n'
+import { i18n, loadLanguageAsync } from 'vuejs/i18n'
 
 import VUserBlock from 'vuejs/components/Block/UserBlock'
 import VMainContent from 'vuejs/components/Content/MainContent'
@@ -90,16 +90,13 @@ import 'theme/assets/styles/main.scss'
     }
 
     function initVi18n () {
-      i18n.locale = drupalDecoupled.lang_code
+      // i18n.locale = drupalDecoupled.lang_code
-      console.log('i18n.messages', i18n.messages)
+      // console.log('i18n.messages', i18n.messages)
-    //   const locales = {
+
-    //     ...Locales
+      loadLanguageAsync(drupalDecoupled.lang_code)
-    //   }
+        .then(() => {
-    //   _I18n = new VueI18n({
+          console.log('main.js language loaded')
-    //     locale: drupalDecoupled.lang_code,
+        })
-    //     locales
-    //   })
-    //   console.log('_I18n', _I18n)
     }
 
     function initVStore () {

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 en from 'locales/en.json'
-import * as fr from './fr.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 { REST } from 'vuejs/api/rest-axios'
-import { JSONAPI } from 'vuejs/api/json-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')
           }
         })