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

# Vue InstantSearch

> Overview of Vue InstantSearch widgets.

<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/api-reference/widgets/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/api-reference/widgets/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/api-reference/widgets/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/api-reference/widgets/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/api-reference/widgets/android"><span className="afs-option-name">Android</span><span className="afs-option-lib">InstantSearch Android</span></a></li>
      <li role="option" aria-selected="false"><a className="afs-option" href="/doc/api-reference/widgets/flutter"><span className="afs-option-name">Flutter</span><span className="afs-option-lib">Algolia for Flutter</span></a></li>
    </ul>
  </div>
</div>

To get started with Vue InstantSearch,
see [What is InstantSearch?](/doc/guides/building-search-ui/what-is-instantsearch/vue)

## Basics

|                                                                      |                                                                                                                                                        |
| -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| [`ais-instant-search`](/doc/api-reference/widgets/instantsearch/vue) | The root wrapper component for all widgets.                                                                                                            |
| [`ais-index`](/doc/api-reference/widgets/index-widget/vue)           | This widget lets you apply widgets to a specific Algolia index.                                                                                        |
| [`ais-search-box`](/doc/api-reference/widgets/search-box/vue)        | A widget to let users set a text-based query.                                                                                                          |
| [`ais-configure`](/doc/api-reference/widgets/configure/vue)          | A widget that lets you provide raw search parameters to the Algolia API without rendering anything.                                                    |
| [`ais-panel`](/doc/api-reference/widgets/panel/vue)                  | A widget that wraps other widgets in a consistent panel design. It also reacts when the widget no longer can refine.                                   |
| [`ais-autocomplete`](/doc/api-reference/widgets/autocomplete/vue)    | A widget that provides the logic to create a connected component that renders results from Algolia.                                                    |
| [`ais-feeds`](/doc/api-reference/widgets/feeds/vue)                  | A widget to display multiple independent result sets from a [multifeed composition](/doc/guides/managing-results/compositions/multifeed-compositions). |
| [`ais-voice-search`](/doc/api-reference/widgets/voice-search/vue)    | A widget to let users perform a voice-based query.                                                                                                     |
| [`insights`](/doc/api-reference/widgets/insights/vue)                | A middleware to help set the user token for insights purposes, and send events from built-in and custom widgets.                                       |
| [`middleware`](/doc/api-reference/widgets/middleware/vue)            | With the middleware API, you can inject logic into Vue InstantSearch.                                                                                  |

## Results

|                                                                     |                                                                                                |
| ------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
| [`ais-hits`](/doc/api-reference/widgets/hits/vue)                   | A widget to display a list of results.                                                         |
| [`ais-infinite-hits`](/doc/api-reference/widgets/infinite-hits/vue) | A widget to display a list of results with a "Show more" button.                               |
| [`ais-highlight`](/doc/api-reference/widgets/highlight/vue)         | Highlighting visually emphasizes matching terms in your search results to help them stand out. |
| [`ais-snippet`](/doc/api-reference/widgets/snippet/vue)             | A widget that displays attributes in your search results in a shorter form (a snippet).        |

## Refinements

|                                                                                     |                                                                                                                                   |
| ----------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| [`ais-refinement-list`](/doc/api-reference/widgets/refinement-list/vue)             | One of the most common widget that you can find in a search UI. With this widget, users can filter the dataset based on facets.   |
| [`ais-color-refinement-list`](/doc/api-reference/widgets/color-refinement-list/vue) | A widget that filters results based on color facet values. It helps users quickly visualize the kind of color that products have. |
| [`ais-dynamic-widgets`](/doc/api-reference/widgets/dynamic-facets/vue)              | Widget to conditionally render other widgets based on the facet merchandising settings of the index.                              |
| [`ais-hierarchical-menu`](/doc/api-reference/widgets/hierarchical-menu/vue)         | Widget that displays a hierarchical menu.                                                                                         |
| [`ais-range-slider`](/doc/api-reference/widgets/range-slider/vue)                   | A widget that allows a user to select a numeric range using a slider with two handles.                                            |
| [`ais-menu`](/doc/api-reference/widgets/menu/vue)                                   | A widget that displays a menu that lets users choose a single value for a specific attribute.                                     |
| [`ais-current-refinements`](/doc/api-reference/widgets/current-refinements/vue)     | A widget that displays a list of refinements applied to the search.                                                               |
| [`ais-range-input`](/doc/api-reference/widgets/range-input/vue)                     | A widget that allows a user to select a numeric range using a minimum and maximum input.                                          |
| [`ais-menu-select`](/doc/api-reference/widgets/menu-select/vue)                     | A widget that allows a user to select a single value to refine in a drop-down menu.                                               |
| [`ais-toggle-refinement`](/doc/api-reference/widgets/toggle-refinement/vue)         | A widget that provides an on/off filtering feature based on an attribute value.                                                   |
| [`ais-numeric-menu`](/doc/api-reference/widgets/numeric-menu/vue)                   | A widget that displays a list of numeric filters in a list. Those numeric filters are pre-configured with creating the widget.    |
| [`ais-rating-menu`](/doc/api-reference/widgets/rating-menu/vue)                     | A widget that lets users refine search results by clicking on stars.                                                              |
| [`ais-clear-refinements`](/doc/api-reference/widgets/clear-refinements/vue)         | A widget that displays a button that lets users clean every refinement applied to the search.                                     |

## Pagination

|                                                                     |                                                                                                        |
| ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
| [`ais-pagination`](/doc/api-reference/widgets/pagination/vue)       | A widget that displays a pagination system which lets users change the current page of search results. |
| [`ais-hits-per-page`](/doc/api-reference/widgets/hits-per-page/vue) | A widget that displays a select element to let users change the number of displayed hits.              |

## Metadata

|                                                                                       |                                                                                                                   |
| ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
| [`ais-breadcrumb`](/doc/api-reference/widgets/breadcrumb/vue)                         | A secondary navigation scheme that lets users see where the current page is in relation to the facet's hierarchy. |
| [`ais-stats`](/doc/api-reference/widgets/stats/vue)                                   | A widget that displays the total number of matching hits and the time it took to get them.                        |
| [`ais-powered-by`](/doc/api-reference/widgets/powered-by/vue)                         | A widget to display the Algolia logo to redirect to the Algolia website.                                          |
| [`ais-state-results`](/doc/api-reference/widgets/state-results/vue)                   | A widget that allows you reach into the current search state.                                                     |
| [`ais-query-rule-custom-data`](/doc/api-reference/widgets/query-rule-custom-data/vue) | A widget to display custom data from Rules.                                                                       |
| [`ais-query-rule-context`](/doc/api-reference/widgets/query-rule-context/vue)         | A widget to set Rule contexts without rendering anything.                                                         |

## Sorting

|                                                                     |                                                                                                                                                                                                                           |
| ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [`ais-sort-by`](/doc/api-reference/widgets/sort-by/vue)             | A widget that displays a list of indices, allowing a user to change the way hits are sorted with replica indices.                                                                                                         |
| [`ais-relevant-sort`](/doc/api-reference/widgets/relevant-sort/vue) | A widget that displays the current search mode when searching in a virtual replica index, and allows users to switch between Relevant and regular sorting, which is more exhaustive and can return less relevant results. |

## Routing

|                                                                 |                                              |
| --------------------------------------------------------------- | -------------------------------------------- |
| [`simple`](/doc/api-reference/widgets/simple-state-mapping/vue) | A state mapping used by default routing.     |
| [`history`](/doc/api-reference/widgets/history-router/vue)      | A router used by default routing.            |
| [`uiState`](/doc/api-reference/widgets/ui-state/vue)            | An object that represents a search UI state. |