Conditional display in Vue InstantSearch

This guide describes what to do when there are no results or when there’s no query. If results haven’t loaded, the search may still be in progress or the device may be offline. For more information, see No hits or is the search still in progress? If you want to feature content in your search results based on a set of conditions, you can use Algolia Rules to:

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

To learn how to suppress InstantSearch’s initial , see Conditional requests.

Handle searches without results

When a query doesn’t return results, display a message and suggest changing the query or clearing filters.

Display a message

To display a fallback message when a query doesn’t return results, use the ais-state-results widget.

Vue

<ais-state-results>
  <template v-slot="{ results: { hits, query } }">
    <ais-hits v-show="hits.length > 0" />
    <div v-show="hits.length === 0">
      No results have been found for {{ query }}.
    </div>
  </template>
</ais-state-results>

This also works with ais-infinite-hits.

To prevent undesirable, additional search requests, see Show and hide widgets.

If users apply an overly specific configuration, they may not find any results. Account for this by letting them reset filters from the “no results” display so they can start another search. Do this with the ais-clear-refinements widget. To clear the query, add :excluded-attributes="[]".

Vue

<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 currently applied filters.

Vue

<ais-state-results>
  <template v-slot="{ results: { hits } }">
    <ais-hits v-show="hits.length > 0" />
    <div v-show="hits.length === 0">
      No results have been found for {{ query }}.
      <ais-current-refinements :excluded-attributes="[]" />
    </div>
  </template>
</ais-state-results>

Handle empty queries

By default, InstantSearch sends search requests even when the query is empty. To hide results until users enter a query, use the following code. This hides the results without preventing search requests.

Vue

<ais-state-results>
  <template v-slot="{ state: { query } }">
    <ais-hits v-show="query.length > 0" />
  </template>
</ais-state-results>

Follow best practices for showing and hiding Vue InstantSearch widgets to prevent undesirable additional search requests.

Search and Discovery platform

Optimization and Personalization

AI-powered experiences

Production and scale

Conditional display in Vue InstantSearch

Handle searches without results

Display a message

Let users reset filters and facets

Handle empty queries

​Handle searches without results

​Display a message

​Let users reset filters and facets

​Handle empty queries

Handle searches without results

Display a message

Let users reset filters and facets

Handle empty queries