Instantsearch, VueJS and Query Limits


I’m trying to use InstantSearch with VueJS but I don’t want to initiate the query on page load as it’s just a searchbox in the top navigation bar. Everything works well, but as soon as I want to implement the query limit (if query is under 1 character, then don’t do the search query) the ais-search-box disappears.

Here is some of my code:

<ais-instant-search :search-client="searchClient" index-name="users" :search-function="searchFunction">

            'ais-SearchBox-input': 'form-control',
            'ais-SearchBox-submitIcon': 'text-muted',

As you can see, I’m using the :search-function as described in the documentation:

Here is the actual JS code:

data() {
    return {
        searchClient: algoliasearch(
        searchFunction(helper) {
            if (helper.state.query) {

As soon as I’m using the “searchFunction” thing, the ais-search-box disappear. After some investigation, I think it’s because “” is not called, but that’s totally the point, I want it to be called after the user have inputted at least one character, but for that he needs the ais-search-box to be loaded, otherwise he can’t write anything

What Am I doing wrong?

Thanks :slight_smile:

1 Like


I think you will want to look at this part of the documentation:

Here is the relevant example for your use case:

const searchClient = {
  search(requests) {
    if (requests.every(({ params }) => !params.query)) {
      return Promise.resolve({
        results: => ({
          hits: [],
          nbHits: 0,
          nbPages: 0,
          processingTimeMS: 0,


You were right that you need to “fake” the results. This is what we do here in the search function.

I hope that helps.

1 Like


Thanks! That’s exactly what I was looking for, works like a charm :slight_smile:
I’ve searched for hours but I’ve missed this part of the documentation.

Have a nice day,

1 Like