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

web/themes/custom/materiotheme/vuejs/components/Form/LoginForm.back.vue

@@ -0,0 +1,94 @@
+<template lang="html">
+  <div id="block-userlogin" class="">
+    <h2>{{ title }}</h2>
+    <section>
+      <input
+        id="edit-name"
+        class="form-email"
+        type="text"
+        v-bind:placeholder="form.ph_email" name="name"
+        v-model="mail"
+        @keyup.enter="login"
+      />
+      <input
+        id="edit-pass"
+        class="form-text"
+        type="password"
+        v-bind:placeholder="form.ph_pass" name="pass"
+        v-model="password"
+        @keyup.enter="login"
+      />
+      <button
+        id="edit-submit"
+        class="button"
+        @click.stop="login"
+      >
+        {{ form.btn_value }}
+      </button>
+      <ul>
+        <li><a
+          v-bind:href="form.register.href"
+        >
+          {{ form.register.title }}
+        </a></li>
+        <li><a
+          v-bind:href="form.reset.href"
+        >
+          {{ form.reset.title }}
+        </a></li>
+      </ul>
+    </section>
+  </div>
+</template>
+
+<script>
+// https://github.com/alvar0hurtad0/drupal-vuejs-todo
+import { mapState, mapActions } from 'vuex'
+export default {
+  data () {
+    return {
+      mail: '',
+      password: ''
+    }
+  },
+  props: ['title', 'form'],
+  computed: {
+    ...mapState(['User'])
+  },
+  methods: {
+    ...mapActions({
+      userLogin: 'User/userLogin'
+    }),
+    login () {
+      this.userLogin({
+        mail: this.mail,
+        pass: this.password
+      })
+    }
+  }
+}
+</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>

web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue

@@ -1,16 +1,15 @@
 <script>
 
 import Vue from 'vue'
-import { MSAPI } from 'vuejs/api/msapi-axios'
 
 export default {
+  props: ['form'],
   data() {
     return {
       template: null,
       typed: ""
     }
   },
-  props: ['form'],
   methods: {
     keyup() {
       console.log("search typed", this.typed);
@@ -20,66 +19,29 @@ export default {
     }
   },
   beforeMount() {
-    console.log('SearchForm beforeMount');
+    // console.log('SearchForm beforeMount');
     if(this._props.form){
-      console.log('SearchForm beforeMount if this._props.form ok');
-      this.template = Vue.compile(this._props.form).render
-    }
-  },
-  beforeUpdate() {
-    console.log('SearchForm beforeUpdate');
-    if(this._props.form){
-      console.log('SearchForm beforeUpdate if this._props.form ok');
-      this.template = Vue.compile(this._props.form).render
+      // console.log('SearchForm beforeMount if this._props.form ok');
+      this.template = Vue.compile(this._props.form)
+      // https://github.com/vuejs/vue/issues/9911
+      this.$options.staticRenderFns = [];
+      this._staticTrees = [];
+      this.template.staticRenderFns.map(fn => (this.$options.staticRenderFns.push(fn)));
     }
   },
   mounted(){
-    console.log('SearchForm mounted');
-    // Drupal.attachBehaviors(this.$el);
-  },
-  updated(){
-    console.log('SearchForm updated');
-    // Drupal.attachBehaviors(this.$el);
+    // console.log('SearchForm mounted');
+    Drupal.attachBehaviors(this.$el);
   },
   render(h) {
-    console.log('searchForm render');
+    // console.log('searchForm render');
     if(!this.template){
       return h('span', 'Loading ...')
     }else{
-      return this.template()
+      return this.template.render.call(this)
     }
   }
 }
-// searchform: (resolve, reject) => (
-//   MSAPI.get(`/search_form`)
-//     .then(({data}) => {
-//       // console.log("materiosapisearchform", data);
-//       resolve({
-//         data() {
-//           return {
-//             typed:""
-//           }
-//         },
-//         methods: {
-//           keyup() {
-//             console.log("search typed", this.typed);
-//           },
-//           submit() {
-//             console.log("search clicked");
-//           }
-//         },
-//         mounted() {
-//           Drupal.attachBehaviors(this.$el);
-//         },
-//         template: data.rendered
-//       })
-//     })
-//     .catch(( error ) => {
-//         console.warn('Issue with get searchform', error)
-//         Promise.reject(error)
-//     })
-//
-// )
 </script>
 
 <style lang="scss" scoped>