Conditional display in Vue InstantSearch

This guide describes what to do when there are no results or when there’s no query.

If you want to feature content in your search results based on a set of conditions, you can use Rules to:

• Feature specific data from within your records to, for example, show promotional prices during a sales period
• Display advertisements or promotional banners.

Handling no results

Since not all queries lead to results, it’s essential to let users know when this happens by providing hints on how to adjust the query.

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 v-slot="{ 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>

The preceding example also works with ais-infinite-hits.

Let the user clear all filters

If a user makes a mistake, they may 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. To clear the query, you can also add :excluded-attributes="[]".

1
2
3
4
5
6
7
8
9
10
11
<ais-state-results>
  <template v-slot="{ 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 v-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 v-slot="{ 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 empty queries

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

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