How to use vue-instantsearch in SSR with Vuex?

I’m struggling to integrate vue-instantsearch with Vuex store in Vue SSR app.

I’ve tried to follow https://github.com/algolia/vue-instantsearch-examples/tree/master/examples/ssr however this example is using only context.store and to adapt it using Vuex

My integartion attempst are following:

<template>
  <div class="vwp-single">
    <ais-index :searchStore="searchStore" :auto-search="false">
      <ais-search-box placeholder="Find products"/>
      <ais-refinement-list attribute-name="colors"></ais-refinement-list>
      <ais-results>
        <template scope="{ result }">
          <div>
            <ais-highlight :result="result" attribute-name="name"></ais-highlight>
          </div>
        </template>
      </ais-results>
    </ais-index>
    <div class="clearfix"></div>
  </div>
</template>

<script>
import {
  createFromAlgoliaCredentials,
  createFromSerialized,
  FACET_OR
} from 'vue-instantsearch'

import { mapGetters } from 'vuex'

const fetchInitialData = (store, route) => {
  let store1
  store1 = createFromAlgoliaCredentials(
    'latency',
    '6be0576ff61c053d5f9a3225e2a90f76'
  )
  store1.indexName = 'bestbuy'
  store1.query = route.params.query ? route.params.query : ''
  store1.addFacet('colors', FACET_OR)
  store1.highlightPreTag = '<mark>'
  store1.highlightPostTag = '</mark>'
  store1.start()
  store1.refresh()
  return store1.waitUntilInSync().then(() => {
    store.dispatch(`pt/searchStore`, store1.serialize())
  })
}

export default {
  computed: {
    ...mapGetters('pt', ['searchStore'])
  },
  prefetch: fetchInitialData,
  beforeMount () {
    if (!window.__INITIAL_STATE__) {
      throw new Error('Not state was found.')
    }
    this.searchStore = createFromSerialized(
      window.__INITIAL_STATE__.pt.searchStore
    )
  },
  methods: {
    loadResults () {
      fetchInitialData(this.$store, this.$route)
    }
  },
  created () {
    this.loadResults()
  },
  watch: {
    '$route' () {
      this.searchStore.query = this.$route.params.query
        ? this.$route.params.query
        : ''
    },
    'searchStore.query' (to) {
      if (to.length === 0) {
        this.$router.push({ name: 'map' })
      } else {
        this.$router.push({ name: 'mapSearch', params: { query: to } })
      }
    }
  }

}
</script>

if I remove ais-index and just render out {{ searchStore }} I can see data returned, but if I try to mount it on ais-index component, it fails with following errors:

Would much appreciate if someone could point me in right direction hiow to debug this or show example code how to integrate vue-instantsearch with Vuex and SSR

[rentorm]

I’ve set Github repo with current implementation, hope this helps - https://github.com/rentorm/vue-instantsearch-vuex

I think there might be something with a way this.searchStore = createFromSerialized methods are being used to set searchStore but I can’t figure out another way how to initiate it on server.

[Haroenv]

Hey @rentorm, sorry for not answering after this last comment, I must have lost the issue. I’m assuming that you found a solution now for this, so will close this issue. If that isn’t the case, feel free to answer with more context