How do I add query parameters in Vue instantsearch V3?

Open Q&A
,
#1

In V2 and below of Vue instantsearch, I could get a value from the URL and have it appear in the search input, which caused the results to be filtered based on the term.

:query-parameters="{
distinct: true,
query: this.queryParam,
}"

In V3, you don’t seem to be able to do this any more. From what I have read in the docs, you can use the ais-configure component to do this, but I have tried every variation to get this working. Does anyone know if it’s still possible and what the new syntax is?

Thanks!

#2

Hi Jack,

The most efficient way to do this, is to use routing to synchronise just the query like this:

Alternatively you can also pass query to a configure widget, or value to a search box widget

Hope that helps!

#3

Hi Heroen,

Thanks for taking a look. Do you have an example of how this would work with the configure widget? The version in the docs doesn’t really make much sense.

Adding the value to the search box will work, but it doesn’t seem to let you amend the value after it is set.

#4

if you only want to set the initial query, you can use a :value / @input for search box like this:

I’d suggest you to use routing instead though, since that works with every widget, and not just search box

1 Like
#5

That works perfectly for my use-case.

Thanks for your help, it’s much appreciated!

1 Like