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# Found an issue?

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# Found an issue?

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# Found an issue?

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?# Found an issue?

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.