refactored user blocks using ajax loaded drupal's html as template for vue

web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue

@@ -0,0 +1,84 @@
+<script>
+
+import Vue from 'vue'
+import { mapState, mapActions } from 'vuex'
+
+export default {
+  props: ['title', 'block'],
+  data () {
+    return {
+      template: null,
+      mail: '',
+      password: ''
+    }
+  },
+  computed: {
+    ...mapState(['User'])
+  },
+  methods: {
+    ...mapActions({
+      userLogin: 'User/userLogin'
+    }),
+    login () {
+      this.userLogin({
+        mail: this.mail,
+        pass: this.password
+      })
+    },
+    request_password () {
+      console.log('request_password');
+    },
+    create_account () {
+      console.log('create_account');
+    }
+  },
+  beforeMount() {
+    console.log('LoginBlock beforeMount', this._props.block);
+    if(this._props.block){
+      // console.log('LoginBlock beforeMount if this._props.block ok');
+      this.template = Vue.compile(this._props.block)
+      this.$options.staticRenderFns = [];
+      this._staticTrees = [];
+      this.template.staticRenderFns.map(fn => (this.$options.staticRenderFns.push(fn)));
+    }
+  },
+  mounted(){
+    // console.log('LoginBlock mounted');
+    Drupal.attachBehaviors(this.$el);
+  },
+  render(h) {
+    // console.log('LoginBlock render');
+    if(!this.template){
+      // console.log('LoginBlock render NAN');
+      return h('span', 'Loading ...')
+    }else{
+      // console.log('LoginBlock render template');
+      return this.template.render.call(this)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  // section{
+  //   max-width:300px;
+  // }
+  // input{
+  //   display:block;
+  //   max-width:100%;
+  //   margin:0.5em 0 0 0;
+  // }
+  // button{
+  //   margin:0.5em 0 0 0;
+  // }
+  // ul{
+  //   margin:0; padding:0.5em 0 0 0;
+  // }
+  // li{
+  //   list-style:none;
+  //   margin:0.5em 0 0 0; padding:0;
+  //   font-size:0.882em;
+  // }
+  // a{
+  // }
+</style>