uiState

About this widget

The uiState object is created by InstantSearch internally. Every widget has its own way of updating the object.

For details, see the example implementation in our routing guide.

For Vue InstantSearch v2

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`.

For Vue InstantSearch v3 and later

The uiState passed to initialUiState or through 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' } }.≈

In the context of routing, the object shape of routeState is completely up to you but must be based on the keys in the uiState.

Example

The following is an example of an InstantSearch uiState object. It represents what the user has searched for, how they’ve refined the results, and how the results are displayed.

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
26
27
28
29
30
31
32
33
const uiState = {
  query: 'Hill Valley',
  refinementList: {
    colors: ['white', 'black']
  },
  configure: {
    distinct: true,
  },
  menu: {
    category: 'Decoration'
  },
  hierarchicalMenu: {
    categories: ['Decoration > Clocks']
  },
  numericMenu: {
    price: '100:500'
  },
  ratingMenu: {
    rating: 4
  },
  range: {
    ageInYears: '2:10'
  },
  toggle: {
    freeShipping: true
  },
  geoSearch: {
    boundingBox: '47.3165,4.9665,47.3424,5.0201'
  },
  sortBy: 'most_popular_index',
  page: 2,
  hitsPerPage: 20
};