updating header menu while loggin (show base link)

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

@@ -38,6 +38,7 @@ import VUserBlock from 'vuejs/components/Block/UserBlock'
 import VMainContent from 'vuejs/components/Content/MainContent'
 import VSearchBlock from 'vuejs/components/Block/SearchBlock'
 import VLeftContent from 'vuejs/components/Content/LeftContent'
+import VHeaderMenu from 'vuejs/components/Content/HeaderMenu'
 
 import { mapState } from 'vuex'
 
@@ -287,30 +288,16 @@ import { MA } from 'vuejs/api/ma-axios'
 
     function initVHeaderMenu () {
       // console.log('initVHeaderMenu');
-      // adding vuejs attributes has it wont work on twig template (see menu--header.html.twig)
-      // not working : String contains an invalid character
-      // document.querySelectorAll(`#block-header a`).forEach(link => {
-      //   console.log(link);
-      //   link.setAttribute('@click.prevent', 'onclick')
-      // });
-
+      const id = 'block-header'
+      const $html_obj = document.querySelector('#' + id)
+      // console.log('main-content', $main_content);
+      const html = $html_obj.outerHTML
       _v_header_menu = new Vue({
         store,
         i18n,
         router,
-        el: '#block-header',
-        methods: {
-          onclick (event) {
-            // console.log("Clicked on header menu link", event);
-            const href = event.target.getAttribute('href')
-            // let title = event.target.innerText;
-            // console.log("Clicked on header menu link : href", href);
-            this.$router.push(href)
-            // replaced by router.beforeEach
-            // this.$store.commit('Common/setPagetitle', title)
-          }
-        }
-      })
+        render: h => h(VHeaderMenu, { props: { id: id, dom_html: html } })
+      }).$mount('#' + id)
     }
 
     function initVMainContent () {

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

@@ -0,0 +1,79 @@
+<script>
+
+import Vue from 'vue'
+
+import { mapState, mapActions } from 'vuex'
+
+import { MA } from 'vuejs/api/ma-axios'
+import router from 'vuejs/route'
+
+export default {
+  router,
+  props:['id','dom_html'],
+  data() {
+    return {
+      html: null,
+      template: null
+    }
+  },
+  computed: {
+    ...mapState({
+      isloggedin: state => state.User.isloggedin
+    })
+  },
+  beforeMount() {
+    // console.log("beforeMount header_menu", this.html);
+    if(!this.template){
+      // console.log('no home_template');
+      if(this.dom_html){ // if html prop is available
+        this.html = this.dom_html
+        this.compileTemplate()
+      }else{ // else get it from ajax
+        this.getMenuBlockHtml()
+      }
+    }
+  },
+  methods: {
+    compileTemplate(){
+      this.template = Vue.compile(this.html)
+    },
+    getMenuBlockHtml(){
+      MA.get('materio_decoupled/ajax/getheadermenu')
+        .then(({data}) => {
+          // console.log('HeaderMenu getMenuBlockHtml data', data);
+          this.html = data.rendered // record the html src into data
+        })
+        .catch(( error ) => {
+          console.warn('Issue with getMenuBlockHtml', error)
+        })
+    },
+    onclick (event) {
+      // console.log("Clicked on header menu link", event);
+      const href = event.target.getAttribute('href')
+      this.$router.push(href)
+    }
+  },
+  render(h) {
+    // console.log('headerMenu render');
+    if(!this.template){
+      return h('span', 'Loading ...')
+    }else{
+      return this.template.render.call(this)
+    }
+  },
+  watch: {
+    html(n, o) {
+      console.log('header_menu html changed', o, n)
+      this.compileTemplate()
+    },
+    isloggedin(n, o) {
+      console.log("HeaderMenu isloggedin changed", o, n)
+      this.getMenuBlockHtml()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>