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

<script>

import Vue from 'vue'
import { MA } from 'vuejs/api/ma-axios'

export default {
  props: ['html'], // get the html from parent with props
  data() {
    return {
      template_src: null, // record the prop into data as it will be available in every hooks
      template: null // compiled template from html used in render
    }
  },
  beforeMount() {
    // console.log('Home beforeMount this.html', this.html);
    if(!this.template_src){
      if(this.html){ // if html prop is available record it has data
        this.template_src = this.html
      }else{ // else get it from ajax (e.g. if we didn't load the page from home)
        this.getHomeHtml()
      }
    }
    // compile the html src (coming from parent with props or from ajax call)
    if(this.template_src){
      this.template = Vue.compile(this.template_src)
      this.$options.staticRenderFns = []
      this._staticTrees = []
      this.template.staticRenderFns.map(fn => (this.$options.staticRenderFns.push(fn)))
    }
  },
  methods: {
    getHomeHtml(){
      MA.get(`/materio_user/login_block`)
        .then(({data}) => {
          this.template_src = data.rendered // record the html src into data
        })
        .catch(( error ) => {
          console.warn('Issue with getHomeHtml', error)
        })
    }
  },
  render(h) {
    if(!this.template){
      return h('span', 'Loading ...')
    }else{
      return this.template.render.call(this)
    }
  }
}

</script>

<style lang="scss" scoped>
</style>