Vue instant search - facet filters


I am trying to filter my results by facet and haven’t found a way to make it work. Is someone able to provide a code example on how to set up the facetFilters?

My code (that is not working):


On the script side - I have my query parameters object - Vue Devtools tells me that it is updating as expected (when I apply the filter to from my select state dropdown):

      queryParameters: {
        facetFilters: []

As a test, I also did this call on the ‘mounted’ hook to make sure things are working on my Algolia account’s side plus that my facet filter string(s) are correct.

  mounted() {{
      facetFilters: "state:WA",
      query: 'kim ben'
    }, function(err, content) {

The above works perfectly - console logging results by state (and a different state if I change the hardcoded value in there).

I believe I must be messing up the way my query parameter object is - can anyone help/give an example?

Thanks in advance!

Hey, this seems pretty interesting, I’m just wondering what you actually want to achieve. Could it be done with <ais-refinement-list /> maybe?


I’m basically just trying to incorporate filtering (i.e. states in Australia, so not too many facets) with the component here:

So I basically need to either mix instantsearch into the component (what I’m trying and failing to do), OR, use the refinement plugin and write my styling from scratch. For long-term reusability, I think understanding how to customise instantsearch will be more beneficial and faster.


Also, I am curious as to how things work :nerd_face: and it’s bugging me that it isn’t working! :smile:

Anyone? Would love to get this working and out there!

Hi @hemal,

I would say you have two ways to approach this:

If you could try one of those out and share the resulting attempt here, that’d be awesome!

Let us know if anything is missing,