Upgrade Guides for InstantSearch

Upgrade from v1 to v2

This guide contains all the major changes that were introduced in v2 with the description on how to migrate from v1. You can find the documentation for Vue InstantSearch v1 here.

Renamed components

Some components have been renamed to be be more consistent with other InstantSearch flavours.

• ais-results -> ais-hits
• ais-tree-menu -> ais-hierarchical-menu
• ais-clear -> ais-clear-refinements
• ais-results-per-page-selector -> ais-hits-per-page
• ais-rating -> ais-rating-menu
• ais-sort-by-selector -> ais-sort-by
• ais-index -> ais-instant-search

All individual component exports have also been renamed from e.g. SearchBox to AisSearchBox. This is to make it more ergonomic to use them as components in a Vue file with the same name as expected.

The Component mixin has been renamed to createWidgetMixin({ connector }). Read more about that in the custom component guide.

New components

Find more information on these in their respective documentation.

1. ais-configure

This widget is the replacement of query-parameters on ais-index.

2. ais-state-results

This component can be used for conditional rendering, and getting information that’s not returned in ais-hits.

3. ais-breadcrumb

To be used together with ais-hierarchical-menu.

4. ais-menu-select

A single-selectable menu, rendered inside a select

5. ais-current-refinements

Shows the current refinements, and allows them to be unset.

6. ais-infinite-hits

Replaces :stack="true" on ais-results (now called ais-hits).

7. ais-numeric-menu

Statically set numerical ranges can be used to refine using this widget.

8. ais-panel

Wrap a widget in ais-panel to be able to give it a header and a footer. Replaces those options on each widget.

9. ais-toggle-refinement

Toggle a boolean refinement either refined/unrefined or refinement/another refinement. Useful for toggles or buttons with two states.

Renamed options

Some options have been renamed. Largely those are:

• attribute-name -> attribute
• result(s) -> hit(s)
• anything in a list -> items / item
• header / footer -> wrap the widget in an ais-panel

If you see anything not mentioned here, please get in touch.

Removed options

• query-parameters

This is now handled via the ais-configure widget. Each query parameter becomes a prop on Configure.

• query

You can now synchronize the query across indices either by using a v-model on two ais-search-boxes of which you hide one, or with ais-configure on both indices, and synchronizing between those like that.

• appId & apiKey

This is now handled by the search-client prop. Search client is what gets returned if you call algoliasearch.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
  <template>
-   <ais-index
+   <ais-instant-search
-     app-id="appID"
-     api-key="apiKey"
+     :search-client="searchClient"
      index-name="myIndex"
    >
      <slot>My app</slot>
-   </ais-index>
+   </ais-instant-search>
  </template>

+ <script>
+ import algoliasearch from 'algoliasearch/lite';
+ const searchClient = algoliasearch('appID', 'apiKey');

+ export default {
+   data() {
+     return {
+       searchClient,
+     };
+   },
+ };
+ </script>

• :stack="true"

When you used to put this on ais-results (now called ais-hits), it allows to load next pages without pagination, but with a “next page” button, as well as showing all pages rather than a single one. Replaced by ais-infinite-hits.

• auto-search

This option is removed in favor of a more complete way of not doing queries using the search client. Information on that can be found in the conditional requests guide.

Removed components

• ais-input

This component has been removed with as alternative having two options:

1. use ais-search-box and style it to not include the extra items
2. use the default slot of ais-search-box to use it with your own custom input (see live):

1
2
3
4
5
6
7
8
<ais-search-box autofocus>
  <input
    slot-scope="{ currentRefinement, refine }"
    :value="currentRefinement"
    @input="refine($event.currentTarget.value)"
    placeholder="Custom SearchBox"
  />
</ais-search-box>

CSS class names

All CSS class names are now different, since we follow the SUIT CSS methodology now, rather than previously a slightly wrong implementation of BEM.

Since the DOM output is also different in most widgets, it’s best to start styling over from scratch on these widgets.

Each widget lists the CSS classes it uses in its documentation page.

Known limitations

1. SSR (server-side rendering)

The implementation of server-side rendering with Vue InstantSearch slightly changed, with a simpler API. Read more on how to use it in the SSR guide.

2. Search store

The search store no longer exists. Custom widgets are either made by making a connector, or a combination of new widgets.

You no longer need to copy a widget to give it custom rendering. Now you can fill in the default slot, which will have everything needed to render that component.

If you’re using this, and have suggestions or questions, please get in touch.

3. Routing

You’re now able to use routing in InstantSearch with, or without Vue Router. Read more on how to use that here.

4. changing props on ais-instant-search

It is possible to change props on ais-instant-search, except routing. If you have a need for that to be changed as well, please get in touch.