Vue InstantSearch FAQ

The ais-rating-menu doesn’t support float values. You can store an integer representation of this value in your records (for example, 0.5 * 10 = 5) and display the original value in your UI.

To search only when the query is longer than a certain length, you can implement a proxy search client. Then, you can add a condition, for example, query.length > 3.

The uiState only works when the widgets responsible for each UI state attribute are mounted. For example, a searchBox widget is necessary to provide a query.

The uiState passed to initialUiState or via routing needs to be nested per index. For example, if you only have a root index called “instant_search”, you should use a value like { instant_search: { query: 'query' } }.

If you want to change, for example, “query into “q” in routing, you need to use the stateMapping functions to:

• first, in stateToRoute, return an object containing “q” for the query,
• then, in routeToState, replace that “q” again with “query”.

If you want to group, for example, “turquoise”, “ocean” and “sky” under “blue”, the recommended solution is to group them at indexing time. You can either add the group name as a separate attribute to globally filter on, or add both values in an array to make both the group and the individual value show up in the list.

For example, with the following dataset:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
[
  {
    "objectID": "1",
    "color": "turquoise"
  },
  {
    "objectID": "2",
    "color": "ocean"
  },
  {
    "objectID": "3",
    "color": "sky"
  }
]

You could create an additional attribute and use it for faceting:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
[
  {
    "objectID": "1",
    "color": "turquoise",
    "colorGroup": "blue"
  },
  {
    "objectID": "2",
    "color": "ocean",
    "colorGroup": "blue"
  },
  {
    "objectID": "3",
    "color": "sky",
    "colorGroup": "blue"
  }
]

Or you could list the individual colors and their groups so you can use them both for faceting:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
[
  {
    "objectID": "1",
    "color": [
      "turquoise",
      "blue"
    ]
  },
  {
    "objectID": "2",
    "color": [
      "ocean",
      "blue"
    ]
  },
  {
    "objectID": "3",
    "color": [
      "sky",
      "blue"
    ]
  }
]

Widgets accept arrays and objects as props. When you put these directly in the template, it causes the widget to register again on every re-render. Sometimes, this can cause infinite loops. Instead, the recommendation is that you keep track of those variables in data.

So, instead of this:

1
2
3
<template>
  <ais-hierarchical-menu :attributes="['lvl0', 'lvl1']" />
</template>

Write this:

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <ais-hierarchical-menu :attributes="attributes" />
</template>

<script>
export default {
  data() {
    return {
      attributes: ['lvl0', 'lvl1']
    }
  }
}
</script>

This is valid for all values which aren’t referentially equal: arrays, objects and functions.

When the ais-dynamic-widgets receives results, it mounts the chosen widgets for that result. An initial search does two network requests. This is because adding a new widget requires a new network request, to know what the refinements are for a facet.

You can avoid this by forcing all facets to be returned by Algolia, or all facets that you maximally want to display the results of. This can be done by adding facets: ['*'] and maxValuesPerFacet using a ais-configure widget:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ais-configure
  :facets="['*']"
  // the highest value you could mount in "limit" and "showmorelimit"
  :max-values-per-facet.camel="10"
/>
<ais-dynamic-widgets>
  <ais-refinement-list attribute="brand" />
  <ais-hierarchical-menu
    :attributes="['hierarchical.lvl0', 'hierarchical.lvl1']"
  />
  <ais-panel>
    <ais-menu attribute="category" />
  </ais-panel>
</ais-dynamic-widgets>

When the dynamicWidgets receives results, it mounts the chosen widgets for that result. To avoid doing an extra network request, facets is set to ['*'] by default.

If you prefer to do two network requests with only the relevant facets returned, you can set facets to [] like this:

1
2
3
4
5
6
7
8
9
<ais-dynamic-widgets :facets="['*']">
  <ais-refinement-list attribute="brand" />
  <ais-hierarchical-menu
    :attributes="['hierarchical.lvl0', 'hierarchical.lvl1']"
  />
  <ais-panel>
    <ais-menu attribute="category" />
  </ais-panel>
</ais-dynamic-widgets>

More detail on these approaches can be found in the facet display guide.