handled home loading if not available in dom (if drupalSettings.path.isFront == false)

web/themes/custom/materiotheme/vuejs/components/Content/MainContent.vue

@@ -1,6 +1,6 @@
 <template lang="html">
   <div :id="id">
-    <router-view name="home" :html="html"></router-view>
+    <router-view name="home" :html="home_template_src"></router-view>
     <router-view name="base"></router-view>
   </div>
 </template>
@@ -8,23 +8,40 @@
 <script>
 import { mapState, mapActions } from 'vuex'
 
+import { MA } from 'vuejs/api/ma-axios'
 import router from 'vuejs/route'
 
 export default {
   router,
-  props:['id','html']
-  // computed: {
-  //   ...mapState({
-  //     token: state => state.User.token,
-  //     isloggedin: state => state.User.isloggedin
-  //   })
-  // },
-  // beforeMount() {
-  //   console.log('MainContent beforeMount this.html', this.html);
-  // },
-  // mounted() {
-  //   console.log('MainContent this.$router', this.$router);
-  // }
+  props:['id','html', 'isfront'],
+  data() {
+    return {
+      home_template_src: null
+    }
+  },
+  beforeMount() {
+    // console.log('MainContent beforeMount this.html', this.html);
+    if(!this.home_template_src){
+      // console.log('no home_template_src');
+      if(this.html && this.isfront){ // if html prop is available and we are landing on home then record it has data
+        this.home_template_src = this.html
+      }else{ // else get it from ajax (e.g. if we didn't load the page from home)
+        this.getHomeHtml()
+      }
+    }
+  },
+  methods: {
+    getHomeHtml(){
+      MA.get('materio_home/ajax/gethome')
+        .then(({data}) => {
+          // console.log('Home getHomeHtml data', data);
+          this.home_template_src = data.rendered // record the html src into data
+        })
+        .catch(( error ) => {
+          console.warn('Issue with getHomeHtml', error)
+        })
+    }
+  }
 }
 </script>