materio-d9/web/themes/custom/materiotheme/assets/scripts/main.js

import Vue from 'vue'

import InfiniteLoading from 'vue-infinite-loading';
Vue.use(InfiniteLoading, {
  props: {
    spinner: 'spiral',
    // slots.noMore: ''
  },
  // system: {
  //   throttleLimit: 50,
  //   /* other settings need to configure */
  // }
});

import store from 'vuejs/store'
import router from 'vuejs/route'

import VUserBlock from 'vuejs/components/Block/UserBlock'
import VMainContent from 'vuejs/components/Content/MainContent'
import VSearchBlock from 'vuejs/components/Block/SearchBlock'

import { mapState } from 'vuex'

// require('theme/assets/styles/main.scss');
import 'theme/assets/styles/main.scss'

(function(Drupal, drupalSettings) {

  var MaterioTheme = function(){

    var _v_sitebranding_block, _v_user_block, _v_header_menu
      , _v_pagetitle_block, _v_search_block
      , _v_main_content;
    var _is_front = drupalSettings.path.isFront;

    console.log('drupalSettings', drupalSettings);

    //  ___      _ _
    // |_ _|_ _ (_) |_
    //  | || ' \| |  _|
    // |___|_||_|_|\__|
    function init(){
      console.log("MaterioTheme init()")
      initVues()
    }

    function initVues(){
      initVRouter();
      initVSiteBrandingBlock()
      initVPagetitleBlock()
      initVUserBlock()
      initVHeaderMenu()
      initVMainContent()
      initVSearchBlock()
    }

    function initVRouter(){
      // we need this to update the title while using history nav
      router.beforeEach((to, from, next) => {
        store.commit('Common/setPagetitle', to.name != 'home' ? to.name : null)
        next();
      })
    }

    function initVSiteBrandingBlock(){
      _v_sitebranding_block = new Vue({
        store,
        router,
        el: '#block-sitebranding',
        methods: {
          onclick(event){
            // console.log("Clicked on logo event", event);
            let href = event.target.getAttribute('href');
            // console.log("Clicked on logo href", href);
            this.$router.push(href)
            // replaced by router.beforeEach
            // this.$store.commit('Common/setPagetitle', null)
          }
        }
      })
    }

    function initVPagetitleBlock(){
      let $blk = document.querySelector('#block-pagetitle')
      let $h2 = $blk.querySelector('h2')
      // get the loaded pagetitle
      let title = $h2.innerText
      // if not front recorde the loaded pagetitle in store
      if (!_is_front) {
        store.commit('Common/setPagetitle', title)
      }
      // replace in template the pagetitle by vue binding
      $h2.innerText = '{{ pagetitle }}'
      // create the vue
      _v_pagetitle_block = new Vue({
        store,
        router,
        el: $blk,
        computed: {
          ...mapState({
            pagetitle: state => state.Common.pagetitle
          })
        },
      })
    }

    function initVUserBlock(){
      let mount_point = drupalSettings.user.uid !== 0 ? 'block-userblock' : 'block-userlogin';
      let props = {
        title: "",
        loginblock:""
      };
      switch (mount_point) {
        case 'block-userlogin':
          let $block = document.getElementById(mount_point);
          console.log('initVUserBlock login form html', $block);
          props.loginblock = $block.outerHTML.trim()
          break;
        case 'block-userblock':
        default:
          break;
      }

      _v_user_block = new Vue({
        store,
        // computed: {
        //   ...mapState({
        //     isloggedin: state => state.User.isloggedin
        //   })
        // },
        created () {
          // if already loggedin, call store.user to get the user infos
          if(drupalSettings.user.uid !== 0){
            this.$store.commit('User/setUid', drupalSettings.user.uid)
            this.$store.dispatch('User/getUser')
          }
        },
        render: h => h(VUserBlock, {props:props})
      }).$mount('#'+mount_point)
      // console.log('initVUserBlock', _v_user_block);
    }

    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')
      // });

      _v_header_menu = new Vue({
        store,
        router,
        el: `#block-header`,
        methods: {
          onclick(event){
            // console.log("Clicked on header menu link", event);
            let 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)
          }
        }
      })
    }

    function initVMainContent(){
      let id = "main-content"
      let $main_content = document.querySelector('#'+id)
      // console.log('main-content', $main_content);
      let main_html = $main_content.innerHTML
      _v_main_content = new Vue({
        store,
        render: h => h(VMainContent, {props:{id:id, html:main_html, isfront:drupalSettings.path.isFront}})
      }).$mount('#'+id)
    }

    function initVSearchBlock(){
      // console.log('initVSearchBlock');
      let id = "block-materiosapisearchblock"
      let $search_block = document.getElementById(id)
      var formhtml = null
      if($search_block){
        // get the search form html to pass it as template to the vue
        // we gain display speed vs async downloaded data
        formhtml = $search_block.innerHTML
      }else{
        // else create the empty block to fill it later with async data
        $search_block = document.createElement('div')
        $search_block.setAttribute('id', id)
        // TODO: get region by REST
        let $region = document.getElementById('header-bottom');
        $region.appendChild($search_block);
      }

      // in any case create the vue
      _v_search_block = new Vue({
        store,
        render: h => h(VSearchBlock, {props:{blockid:id, formhtml:formhtml}})
      }).$mount('#'+id)
    }

    init()
  } // end MaterioTheme()

  var materiotheme = new MaterioTheme();

})(Drupal, drupalSettings);