refactored the layout:

removed fixed head, replaced with flex
moved pagetitle and searchform to headerbottom region
added Common store to vuejs with pagetitle data
added pagetitle vuejs component

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

@@ -1,6 +1,5 @@
 <template>
   <div id="Base">
-    <h1 class="page-title">{{ pagetitle }}</h1>
     <div class="loading" v-if="!items.length">
       <span>Loading ...</span>
     </div>

web/themes/custom/materiotheme/vuejs/store/index.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+import Common from './modules/common'
 import User from './modules/user'
 import Search from './modules/search'
 
@@ -8,6 +9,7 @@ import Search from './modules/search'
 Vue.use(Vuex)
 export default new Vuex.Store({
   modules: {
+    Common,
     User,
     Search
   }

web/themes/custom/materiotheme/vuejs/store/modules/common.js

@@ -0,0 +1,27 @@
+import { REST } from 'vuejs/api/rest-axios'
+import { JSONAPI } from 'vuejs/api/json-axios'
+import qs from 'querystring'
+
+export default {
+  namespaced: true,
+
+  // initial state
+  state : {
+    pagetitle:null,
+  },
+
+  // getters
+  getters : {},
+
+  // mutations
+  mutations : {
+    setPagetitle (state, title) {
+      console.log('Common, setPagetitle', title);
+      state.pagetitle = title
+    }
+  },
+
+  // actions
+  actions : {}
+
+}

web/themes/custom/materiotheme/vuejs/store/modules/search.js

@@ -17,7 +17,7 @@ export default {
     count: 0,
     // infinteState will come from vue-infinite-loading plugin
     // implemented in vuejs/components/Content/Base.vue
-    infiniteState: null
+    infiniteLoadingState: null
   },
 
   // getters
@@ -55,8 +55,8 @@ export default {
     incrementOffset(state) {
       state.offset += state.limit
     },
-    setInfiniteState(state, s){
-      state.infiniteState = s
+    setInfiniteState(state, infiniteLoadingstate){
+      state.infiniteLoadingState = infiniteLoadingstate
     }
   },
 
@@ -67,12 +67,13 @@ export default {
       commit('resetUuids')
       commit('resetItems')
       commit('resetOffset')
+      this.commit('Common/setPagetitle', state.keys)
       dispatch('getResults')
     },
-    nextPage ({ dispatch, commit, state }, $state) {
-      console.log("Search nextPage", $state);
+    nextPage ({ dispatch, commit, state }, $infiniteLoadingstate) {
+      console.log("Search nextPage", $infiniteLoadingstate);
       commit('incrementOffset')
-      commit('setInfiniteState', $state)
+      commit('setInfiniteState', $infiniteLoadingstate)
       dispatch('getResults')
     },
     getResults ({ dispatch, commit, state }) {
@@ -161,15 +162,15 @@ export default {
       }
       console.log('items', items)
       commit('setItems', items)
-      if(state.infiniteState){
+      if(state.infiniteLoadingState){
         if (state.offset + state.limit > state.count) {
           console.log('Search infinite completed');
           // tell to vue-infinite-loading plugin that there si no new page
-          state.infiniteState.complete()
+          state.infiniteLoadingState.complete()
         }else{
           console.log('Search infinite loaded');
           // tell to vue-infinite-loading plugin that newpage is loaded
-          state.infiniteState.loaded()
+          state.infiniteLoadingState.loaded()
         }
       }
     }