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

import Vue from 'vue'

import store from 'vuejs/store'

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_user_block, _v_main_content, _v_search_block;
    var _is_front = drupalSettings.path.isFront;

    console.log('drupalSettings', drupalSettings);

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

    function initVues(){
      initUserVBlock()
      initVMainContent()
      initVSearchBlock()
    }

    function initUserVBlock(){
      let mount_point = drupalSettings.user.uid !== 0 ? '#block-userblock' : '#block-userlogin';
      let props = {
        title: "",
        form:""
      };
      switch (mount_point) {
        case '#block-userlogin':
          // let $form = document.getElementById('user-login-form');
          // console.log('login form html', $form);
          // props.form = $form.outerHTML
          let $block = document.querySelector(mount_point);
          props = {
            title: $block.querySelector('h2').textContent,
            form: {
              ph_email: $block.querySelector('input#edit-name').getAttribute('placeholder'),
              ph_pass: $block.querySelector('input#edit-pass').getAttribute('placeholder'),
              btn_value: $block.querySelector('input#edit-submit').getAttribute('value'),
              register: {
                title: $block.querySelector('a.create-account-link').textContent,
                href: $block.querySelector('a.create-account-link').getAttribute('href')
              },
              reset: {
                title: $block.querySelector('a.request-password-link').textContent,
                href: $block.querySelector('a.request-password-link').getAttribute('href')
              }
            }
          }
          break;
        case '#block-userblock':
        default:
          break;
      }
      // console.log(props);

      _v_user_block = new Vue({
        store,
        // computed: {
        //   ...mapState({
        //     isloggedin: state => state.User.isloggedin
        //   })
        // },
        created () {
          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('initUserVBlock', _v_user_block);
    }

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

    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)
        let $region = document.getElementById('content-top');
        $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);