materio-d8/web/themes/custom/materiotheme/vuejs/components/Content/MainContent.vue

<template lang="html">
  <div :id="id">
    <!-- <router-view name="home" :html="home_template_src"></router-view> -->
    <!-- <router-view name="base"></router-view> -->
    <router-view :html="home_template_src" :full="full_home_template_loaded"/>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

import MA from 'vuejs/api/ma-axios'
import router from 'vuejs/route'

export default {
  router,
  props:['id','html', 'isfront'],
  data() {
    return {
      home_template_src: null,
      full_home_template_loaded: false
    }
  },
  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()
      // }

      // console.log('no home_template_src')
      if (this.isfront) {
        // if html prop is available and we are landing on home then record it has data
        this.home_template_src = this.html
      }
      // in any case load the full home template if not already loaded
      if (!this.full_home_template_loaded) {
        this.getHomeHtml()
      }
    }
  },
  methods: {
    getHomeHtml(){
      console.log('MainContent getHomeHtml');
      MA.get('materio_home/ajax/gethome')
        .then(({data}) => {
          // console.log('MainContent getHomeHtml data', data)
          this.full_home_template_loaded = true
          this.home_template_src = data.rendered // record the html src into data
        })
        .catch((error) => {
          console.warn('Issue with getHomeHtml', error)
        })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>