handled home loading if not available in dom (if drupalSettings.path.isFront == false)

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

@@ -28,6 +28,31 @@ export default {
       items: state => state.Search.items
     })
   },
+  methods: {
+    ...mapActions({
+      newSearch: 'Search/newSearch'
+    })
+  },
+  created() {
+    // laucnh a search if params exists in url query
+    console.log('Base created() location',window.location);
+    let params = new URLSearchParams(window.location.search)
+    if(params.has('keys')){
+      this.$store.commit('Search/setKeys', params.get('keys'))
+      this.newSearch()
+    }
+  },
+  // beforeRouteEnter (to, from, next) {
+  //   console.log('Base beforeRouteEnter');//, to, from, next);
+  //   next()
+  // },
+  beforeRouteUpdate (to, from, next) {
+    console.log('Base beforeRouteUpdate', to, from, next);
+    this.$store.commit('Search/setKeys', to.query.keys)
+    this.$store.commit('Search/setTerm', to.query.term)
+    this.newSearch()
+    next()
+  },
   components: {
     Card
   }

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

@@ -1,45 +1,25 @@
-
 <script>
 
 import Vue from 'vue'
-import { MA } from 'vuejs/api/ma-axios'
 
 export default {
   props: ['html'], // get the html from parent with props
   data() {
     return {
-      template_src: null, // record the prop into data as it will be available in every hooks
       template: null // compiled template from html used in render
     }
   },
   beforeMount() {
-    // console.log('Home beforeMount this.html', this.html);
-    if(!this.template_src){
-      if(this.html){ // if html prop is available record it has data
-        this.template_src = this.html
-      }else{ // else get it from ajax (e.g. if we didn't load the page from home)
-        this.getHomeHtml()
-      }
-    }
+    // console.log('Home beforeMount');
     // compile the html src (coming from parent with props or from ajax call)
-    if(this.template_src){
-      this.template = Vue.compile(this.template_src)
+    if(this.html){
+      // console.log('html', this.html);
+      this.template = Vue.compile(this.html)
       this.$options.staticRenderFns = []
       this._staticTrees = []
       this.template.staticRenderFns.map(fn => (this.$options.staticRenderFns.push(fn)))
     }
   },
-  methods: {
-    getHomeHtml(){
-      MA.get(`/materio_user/login_block`)
-        .then(({data}) => {
-          this.template_src = data.rendered // record the html src into data
-        })
-        .catch(( error ) => {
-          console.warn('Issue with getHomeHtml', error)
-        })
-    }
-  },
   render(h) {
     if(!this.template){
       return h('span', 'Loading ...')

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

@@ -1,6 +1,6 @@
 <template lang="html">
   <div :id="id">
-    <router-view name="home" :html="html"></router-view>
+    <router-view name="home" :html="home_template_src"></router-view>
     <router-view name="base"></router-view>
   </div>
 </template>
@@ -8,23 +8,40 @@
 <script>
 import { mapState, mapActions } from 'vuex'
 
+import { MA } from 'vuejs/api/ma-axios'
 import router from 'vuejs/route'
 
 export default {
   router,
-  props:['id','html']
-  // computed: {
-  //   ...mapState({
-  //     token: state => state.User.token,
-  //     isloggedin: state => state.User.isloggedin
-  //   })
-  // },
-  // beforeMount() {
-  //   console.log('MainContent beforeMount this.html', this.html);
-  // },
-  // mounted() {
-  //   console.log('MainContent this.$router', this.$router);
-  // }
+  props:['id','html', 'isfront'],
+  data() {
+    return {
+      home_template_src: null
+    }
+  },
+  beforeMount() {
+    // console.log('MainContent beforeMount this.html', this.html);
+    if(!this.home_template_src){
+      // console.log('no home_template_src');
+      if(this.html && this.isfront){ // if html prop is available and we are landing on home then record it has data
+        this.home_template_src = this.html
+      }else{ // else get it from ajax (e.g. if we didn't load the page from home)
+        this.getHomeHtml()
+      }
+    }
+  },
+  methods: {
+    getHomeHtml(){
+      MA.get('materio_home/ajax/gethome')
+        .then(({data}) => {
+          // console.log('Home getHomeHtml data', data);
+          this.home_template_src = data.rendered // record the html src into data
+        })
+        .catch(( error ) => {
+          console.warn('Issue with getHomeHtml', error)
+        })
+    }
+  }
 }
 </script>
 

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

@@ -4,7 +4,7 @@ import Vue from 'vue'
 
 import router from 'vuejs/route'
 
-import { mapState, mapActions } from 'vuex'
+import { mapState } from 'vuex'
 
 export default {
   router,
@@ -12,25 +12,26 @@ export default {
   data() {
     return {
       template: null,
-      keys: "",
-      autocomplete: ""
+      typed: null,
+      autocomplete: null
     }
   },
+  computed: {
+    ...mapState({
+      keys: state => state.Search.keys,
+      term: state => state.Search.term
+    })
+  },
   methods: {
-    ...mapActions({
-      newSearch: 'Search/newSearch'
-    }),
     submit() {
       console.log("search clicked", this.keys, this.autocomplete);
-      this.newSearch(this.keys, this.autocomplete)
-        .then(() => {
-          this.$router.push({name:'base'})
-        });
+      // New search is triggered by Base.vue with router (which will also fill the store)
+      this.$router.push({name:'base', query:{keys:this.typed,term:this.autocomplete}})
     },
     onAutoCompleteSelect(event, ui){
       event.preventDefault();
       // console.log('autoCompleteSelect', event, ui);
-      this.keys = ui.item.label
+      this.typed = ui.item.label
       this.autocomplete = ui.item.value
     }
   },
@@ -46,10 +47,19 @@ export default {
     }
   },
   watch: {
-    keys(){
-      console.log('keys changed', this.keys);
+    keys(n, o){
+      console.log('keys changed', n, o);
+      this.typed = n
+    },
+    term(n, o){
+      console.log('autocomplete changed', n, o);
+      this.autocomplete = n
     }
   },
+  created() {
+    this.typed = this.keys
+    this.autocomplete = this.term
+  },
   mounted(){
     // console.log('SearchForm mounted');
     Drupal.attachBehaviors(this.$el);