What is Vue InstantSearch?

Vue InstantSearch is an open source UI library for Vue that lets you build a search interface in your frontend app.

InstantSearch focuses on enhancing your frontend with widgets that you can combine to create unique search interfaces.

InstantSearch supports server-side rendering and offers full routing capabilities.

InstantSearch suite includes various “flavors” to meet different development needs:

InstantSearch offers three levels of increasing control over your UI:

1. Start with a predefined widget that you can configure and style with CSS.
2. To change its render output (DOM or Native), customize a predefined widget to render what you want.
3. To implement something that doesn’t exist, create a custom widget.

Predefined widgets

The recommended way to use InstantSearch is with its predefined widgets such as ais-search-box. InstantSearch includes a set of widgets that are most often used in search experiences. Widgets provide features and a rendered output. You can place them anywhere on your UI, configure them, and style them with CSS.

For example, add the ais-refinement-list` widget and ask it to show a list of brands, so your users can refine their search using those brands.

1
<ais-refinement-list attribute="brand" />

Within the Vue InstantSearch documentation, widgets are components, and vice-versa. When you see the word widget in this documentation, consider it as a Vue component.

The InstantSearch wrapper

The ais-instant-search wrapper communicates between your app and Algolia. This is where you add all the widgets. It accepts a search client and an index name.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
  <ais-instant-search
    index-name="INDEX_NAME"
    :search-client="searchClient"
  >
    <!-- Add your widgets here -->
  </ais-instant-search>
</template>

<script>
  export default {
    data() {
      return {
        searchClient: algoliasearch(
          'latency',
          '6be0576ff61c053d5f9a3225e2a90f76'
        ),
      };
    },
  };
</script>

For more information, see Vue InstantSearch API reference and Getting started.

CSS theme

The predefined widgets in Vue InstantSearch are compatible with the default CSS theme:

For more information, see Style your widgets.

Customize widgets

Algolia’s predefined widgets, with their fixed behavior and output, may not fully meet your requirements. For example, you might want to customize the rendering of the ais-menu widget to display as a select element instead of a list of links. You may also want to render it as a keyboard-controlled slideshow of images.

To address these limitations, Vue InstantSearch uses “connectors” to redefine widget behavior and DOM output.

For more information, see Customize a Vue InstantSearch widget.

Custom widgets

If none of the previous solutions work for you and you want to create a new widget from scratch, InstantSearch provides a third layer of API for this: creating custom widgets. This requires two APIs: the first one lets you create a new connector, and the second one lets you create a new widget. Both solutions give you full control of the render and behavior.

When building a new widget, be prepared to dive deep into the Algolia semantics to achieve what you want.

For more information, see Create your own Vue InstantSearch widgets.

Need help?

Vue InstantSearch is worked on full-time by Algolia’s JavaScript team.

Join the community

Ask questions and find answers on those following platforms.

• Algolia Community Discord
• Stack Overflow
• Open and read GitHub issues

Provide feedback

• Write a feature request
• Use the Did you find this page helpful? form below

Stay up to date

• Look at the changelog.

Contributing?

All contributors are welcome, from casual to regular. Feel free to open a pull request.