Conditional Display

You’re reading the documentation for Vue InstantSearch v3. Read our migration guide to learn how to upgrade from v2 to v3. You can still find the documentation for version 1 on our community website.

Handling no results

Not all queries lead to results, and it’s important to let users know when this happens. This gives you an opportunity to provide hints on how to adjust the query. This way, you can ensure users don’t leave your website or search using an external search engine.

Display a message

The easiest way to display a fallback message when a query doesn’t return results is to use the ais-state-results widget.

1
2
3
4
5
6
7
8
<ais-state-results>
  <template slot-scope="{ results: { hits, query } }">
    <ais-hits v-if="hits.length > 0" />
    <div v-else>
      No results have been found for {{ query }}.
    </div>
  </template>
</ais-state-results>

Note that the above example also works with ais-infinite-hits.

Let the user clear all filters

Users make mistakes, which can cause them to not find any results. You can account for this by providing a way to clear filters right from the “no results” state, so they can start over.

You can achieve this with the ais-clear-refinements widget. You can also add :excluded-attributes="[]" to clear the query as well.

1
2
3
4
5
6
7
8
9
10
11
<ais-state-results>
  <template slot-scope="{ results: { hits } }">
    <ais-hits v-if="hits.length > 0" />
    <div v-else>
      No results have been found for {{ query }}.
      <ais-clear-refinements :excluded-attributes="[]">
        <template slot="resetLabel">Clear all refinements</template>
      </ais-clear-refinements>
    </div>
  </template>
</ais-state-results>

You can also use ais-current-refinements to show the currently applied refinements.

1
2
3
4
5
6
7
8
9
<ais-state-results>
  <template slot-scope="{ results: { hits } }">
    <ais-hits v-if="hits.length > 0" />
    <div v-else>
      No results have been found for {{ query }}.
      <ais-current-refinements :excluded-attributes="[]" />
    </div>
  </template>
</ais-state-results>

Handling the empty query

By default, Vue InstantSearch always shows you results, even when the query is empty. Depending on your use case and the way you want to build your UI, you may want to only show results when there’s a query.

1
2
3
4
5
<ais-state-results>
  <template slot-scope="{ state: { query } }">
    <ais-hits v-if="query.length > 0" />
  </template>
</ais-state-results>