0

I'm building a Single Page Application using, Vue, Vue-router and Vuex. I've tried to implement Algolia Instantsearch vuejs, but I'm having some issues. Since my app is using a lot of nested components, I'm having a hard time figuring out how to structure this one.

This is the basic structure: - App - Header (this is where the search input is placed) - Content - Search (this is where the refinements and results are shown) - Footer

I've read the documentation, but I might have missed something. Let's say the user is on the homepage, when starting typing into the searchinput in the Header component. I then use vue-router to go to /search, but this doesn't seem to work?

I don't know how to do this? As from what I can understand, the documentation only show you how to sync with vue-router and now how to handle my scenario.

I believe this is a fairly common use case for instantsearch, but I couldn't find anything searching through Google. Maybe because, I don't know how to describe the issue.

I hope you can help.

Thanks!

Christian Gerdes
  • 279
  • 1
  • 2
  • 16

1 Answers1

1

If you use the latest version of vue-instantsearch, you may use ais-configureas describe by https://www.algolia.com/doc/api-reference/widgets/configure/vue/.

<ais-instant-search :index-name="indexName" :search-client="searchClient">
  <ais-configure :query="query" />
  <ais-hits>
    <div slot="item" slot-scope="{ item }">
      <h2>{{ item }}</h2>
    </div>
  </ais-hits>
</ais-instant-search>
Alexcode
  • 1,598
  • 7
  • 15
  • Hello @Alexcode, I am also trying to sync the state of a search box placed outside the component where the filters and hits are implemented but failing to see how the above would work? I have tried to sync query with a query in the data function but this leads to errors (the input clears itself). Could you please provide more information? Thanks – Stf_F Nov 18 '21 at 00:52