API Reference / Vue InstantSearch Widgets

Vue InstantSearch Widgets

To see the widgets in action, check out our interactive widget showcase.

Basics

ais-instant-search

A wrapper that allows you to configure the credentials for the search.

ais-index

This widget lets you apply widgets to a specific Algolia index. It’s useful when you want to build a federated search interface.

ais-search-box

A widget to let the user set a text-based query.

ais-configure

A widget that lets you provide raw search parameters to the Algolia API without rendering anything.

ais-configure-related-items

A widget that computes search parameters to use in related items experiences, without rendering anything.

ais-panel

A widget that wraps other widgets in a consistent panel design. It also reacts when the widget no longer can refine.

ais-autocomplete

A widget that provides the logic to create a connected component that renders results from Algolia.

ais-voice-search

A widget to let the user perform a voice-based query.

insights

A middleware to help set the userToken for insights purposes, and send events from built-in and custom widgets.

middleware

With the middleware API, you can inject functionalities in the Vue InstantSearch lifecycle.

Results

ais-hits

A widget to display a list of results.

ais-infinite-hits

A widget to display a list of results with a “Show more” button.

ais-highlight

A widget that renders any attribute from a hit into its highlighted form when relevant.

ais-snippet

A widget that displays snippeted attributes of your search results.

Refinements

ais-refinement-list

One of the most common widget that you can find in a search UI. With this widget, the user can filter the dataset based on facets.

ais-hierarchical-menu

A widget to create a navigation based on a hierarchy of facet attributes. It is commonly used for categories with subcategories.

ais-range-slider

A widget that allows a user to select a numeric range using a slider with two handles.

ais-menu

A widget that displays a menu that lets the user choose a single value for a specific attribute.

ais-current-refinements

A widget that displays a list of refinements applied to the search.

ais-range-input

A widget that allows a user to select a numeric range using a minimum and maximum input.

ais-menu-select

A widget that allows a user to select a single value to refine in a dropdown menu.

ais-toggle-refinement

A widget that provides an on/off filtering feature based on an attribute value.

ais-numeric-menu

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

A widget that lets the user refine search results by clicking on stars.

ais-clear-refinements

A widget that displays a button that lets the user clean every refinement applied to the search.

Pagination

ais-pagination

A widget that displays a pagination system allowing the user to change the current page.

ais-hits-per-page

A widget that displays a select element to let the user change the number of displayed hits.

Metadata

ais-breadcrumb

A secondary navigation scheme that lets the user see where the current page is in relation to the facet’s hierarchy.

ais-stats

A widget that displays the total number of matching hits and the time it took to get them.

ais-powered-by

A widget to display the Algolia logo to redirect to our website.

ais-state-results

A widget that allows you reach into the current search state.

ais-query-rule-custom-data

A widget to display custom data from Rules.

ais-query-rule-context

A widget to set Rule contexts without rendering anything.

Sorting

ais-sort-by

A widget that displays a list of indices, allowing a user to change the way hits are sorted (with replica indices).

ais-relevant-sort

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

A state mapping used by default with routing.

history

A router used by default with routing.

uiState

An object that represents the state of the search.

Did you find this page helpful?