> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Conditional display in Vue InstantSearch

> Learn how to improve your Vue InstantSearch app when there are no results or queries.

export const SearchQuery = () => <Tooltip tip="The text users enter into a search box. In the Search API, this corresponds to the query parameter. A search query is often used with filters, facets, and other parameters, but these aren't part of the query text itself.">
    search query
  </Tooltip>;

export const Filter = () => <Tooltip tip="A filter is a condition that limits which records Algolia returns. Filters often use one or more facet-value pairs, such as brand:Apple AND color:red. You can also filter by numeric values, dates, tags, booleans, or geographic constraints." cta="Filtering" href="/doc/guides/managing-results/refine-results/faceting">
    filter
  </Tooltip>;

<div className="not-prose algolia-flavor-switcher">
  <div className="afs-dropdown">
    <div className="afs-trigger" role="button" tabIndex="0" aria-haspopup="listbox">
      <span className="afs-current">Vue</span>

      <svg className="afs-chevron lucide lucide-chevron-down" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <path d="m6 9 6 6 6-6" />
      </svg>
    </div>

    <ul className="afs-menu" role="listbox">
      <li role="option" aria-selected="false"><a className="afs-option" href="/doc/guides/building-search-ui/going-further/conditional-display/js"><span className="afs-option-name">JavaScript</span><span className="afs-option-lib">InstantSearch.js</span></a></li>
      <li role="option" aria-selected="false"><a className="afs-option" href="/doc/guides/building-search-ui/going-further/conditional-display/react"><span className="afs-option-name">React</span><span className="afs-option-lib">React InstantSearch</span></a></li>
      <li role="option" aria-selected="true"><a className="afs-option is-current" href="/doc/guides/building-search-ui/going-further/conditional-display/vue"><span className="afs-option-name">Vue</span><span className="afs-option-lib">Vue InstantSearch</span></a></li>
      <li role="option" aria-selected="false"><a className="afs-option" href="/doc/guides/building-search-ui/going-further/conditional-display/ios"><span className="afs-option-name">iOS</span><span className="afs-option-lib">InstantSearch iOS</span></a></li>
      <li role="option" aria-selected="false"><a className="afs-option" href="/doc/guides/building-search-ui/going-further/conditional-display/android"><span className="afs-option-name">Android</span><span className="afs-option-lib">InstantSearch Android</span></a></li>
    </ul>
  </div>
</div>

This guide describes what to do when there are [no results](#handling-no-results) or when there's [no query](#handling-empty-queries). **Sometimes, though, users may not get any hits if their device [can't access the network or the network connection is slow](/doc/guides/building-search-ui/ui-and-ux-patterns/pagination/vue#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](https://www.algolia.com/ecommerce-merchandising-playbook/merchandise-search-results-page/) to, for example, show promotional prices during a sales period
* [Display advertisements or promotional banners](/doc/guides/managing-results/rules/merchandising-and-promoting/how-to/add-banners).

<Info>
  To learn how to suppress InstantSearch's initial <SearchQuery />,
  see [Conditional requests](/doc/guides/building-search-ui/going-further/conditional-requests/vue).
</Info>

## 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 their 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`](/doc/api-reference/widgets/state-results/vue) widget.

```html Vue theme={"system"}
<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`](/doc/api-reference/widgets/infinite-hits/vue).

<Info>
  To prevent undesirable, additional search requests,
  see [Show and hide widgets](/doc/guides/building-search-ui/widgets/show-and-hide-widgets/vue).
</Info>

### Let users reset filters and facets

If users apply an overly specific <Filter /> configuration, they may not find any results.
You should 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`](/doc/api-reference/widgets/clear-refinements/vue) widget.
To clear the query, add `:excluded-attributes="[]".`

```html Vue theme={"system"}
<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`](/doc/api-reference/widgets/current-refinements/vue) to show currently applied filters.

```html Vue theme={"system"}
<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>
```

## Handling empty queries

By default, 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.

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

<Note>
  Follow best practices for [showing and hiding Vue InstantSearch widgets](/doc/guides/building-search-ui/widgets/show-and-hide-widgets/vue) to prevent undesirable additional search requests.
</Note>