better modalCard, integrated i18n with vuejs-i18n and drupal's strings_i18n_json_export

remain to automaticly export jsons and updated json files with webpack
and to understand how to access nested translations

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

@@ -26,6 +26,11 @@ Vue.use(VModal)
 import store from 'vuejs/store'
 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 VUserBlock from 'vuejs/components/Block/UserBlock'
 import VMainContent from 'vuejs/components/Content/MainContent'
 import VSearchBlock from 'vuejs/components/Block/SearchBlock'
@@ -43,9 +48,10 @@ import 'theme/assets/styles/main.scss'
       _v_pagetitle_block, _v_search_block,
       _v_main_content, _v_left_content
     const _is_front = drupalSettings.path.isFront
-
     console.log('drupalSettings', drupalSettings)
 
+    // let _I18n
+
     //  ___      _ _
     // |_ _|_ _ (_) |_
     //  | || ' \| |  _|
@@ -70,6 +76,8 @@ import 'theme/assets/styles/main.scss'
     function initVues () {
       // only launch views if we are not in commerce pages
       if (!checkNoVuePages()) {
+        initVi18n()
+        initVStore()
         initVRouter()
         initVSiteBrandingBlock()
         initVPagetitleBlock()
@@ -81,6 +89,23 @@ import 'theme/assets/styles/main.scss'
       initVUserBlock()
     }
 
+    function initVi18n () {
+      i18n.locale = drupalDecoupled.lang_code
+      console.log('i18n.messages', i18n.messages)
+    //   const locales = {
+    //     ...Locales
+    //   }
+    //   _I18n = new VueI18n({
+    //     locale: drupalDecoupled.lang_code,
+    //     locales
+    //   })
+    //   console.log('_I18n', _I18n)
+    }
+
+    function initVStore () {
+      store.dispatch('Showrooms/getItems')
+    }
+
     function initVRouter () {
       // we need this to update the title and body classes while using history nav
       router.beforeEach((to, from, next) => {
@@ -136,6 +161,7 @@ import 'theme/assets/styles/main.scss'
     function initVSiteBrandingBlock () {
       _v_sitebranding_block = new Vue({
         store,
+        i18n,
         router,
         el: '#block-sitebranding',
         methods: {
@@ -165,6 +191,7 @@ import 'theme/assets/styles/main.scss'
       // create the vue
       _v_pagetitle_block = new Vue({
         store,
+        i18n,
         router,
         el: $blk,
         computed: {
@@ -195,6 +222,7 @@ import 'theme/assets/styles/main.scss'
 
       _v_user_block = new Vue({
         store,
+        i18n,
         // computed: {
         //   ...mapState({
         //     isloggedin: state => state.User.isloggedin
@@ -223,6 +251,7 @@ import 'theme/assets/styles/main.scss'
 
       _v_header_menu = new Vue({
         store,
+        i18n,
         router,
         el: '#block-header',
         methods: {
@@ -246,6 +275,7 @@ import 'theme/assets/styles/main.scss'
       const main_html = $main_content.innerHTML
       _v_main_content = new Vue({
         store,
+        i18n,
         render: h => h(VMainContent, { props: { id: id, html: main_html, isfront: drupalSettings.path.isFront } })
       }).$mount('#' + id)
     }
@@ -271,6 +301,7 @@ import 'theme/assets/styles/main.scss'
       // in any case create the vue
       _v_search_block = new Vue({
         store,
+        i18n,
         render: h => h(VSearchBlock, { props: { blockid: id, formhtml: formhtml } })
       }).$mount('#' + id)
     }
@@ -280,6 +311,7 @@ import 'theme/assets/styles/main.scss'
       // in any case create the vue
       _v_left_content = new Vue({
         store,
+        i18n,
         render: h => h(VLeftContent, { props: { id: id } })
       }).$mount('#' + id)
     }