Vue InstantSearch
Before building your UI, don't forget to install the library.
Basics
| ais-instant-search |
A wrapper that allows you to configure your 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 |
| middleware |
With the middleware API, you can inject functionality into Vue InstantSearch. |
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 attributes in your search results in a shorter form (a snippet). |
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-color-refinement-list |
A widget that filters results based on color facet values. It helps the user quickly visualize the kind of color that products have. |
| ais-dynamic-widgets |
Widget to conditionally render other widgets based on the facet merchandising settings of the index. |
| ais-hierarchical-menu |
A widget to create a navigation menu based on a hierarchy of facet attributes. It’s 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. |