Upgrading Vue InstantSearch
On this page
Upgrade event tracking
Starting from v4.9.0, Vue InstantSearch simplifies the event tracking process with the insights
option.
You no longer need to install the search-insights
library or set up the insights
middleware yourself.
Here are some benefits when using the insights
option:
- It better handles the
userToken
. Once you set it, all the search and event tracking calls include the token. - It automatically sends default events from built-in widgets such as
ais-refinement-list
,ais-menu
, etc. You can also change the event payloads, or remove them altogether. - It lets you send custom events from your custom widgets.
- It simplifies forwarding events to third-party trackers.
If you’ve been tracking events directly with search-insights
or with the insights
middleware, you should:
- Upgrade Vue InstantSearch to v4.9.0 or greater
- Migrate from using the
insights
middleware to theinsights
option - Either update or remove the
search-insights
library
Use the insights
option
Starting from v4.9.0, Vue InstantSearch lets you enable event tracking with the insights
option. You no longer need to set up the insights
middleware yourself.
1
2
3
4
5
6
7
<template>
<ais-instant-search
:insights="true"
>
<!-- widgets -->
</ais-instant-search>
</template>
If you had already set up the insights
middleware in your code, you can now remove it and move its configuration to the insights
option.
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
<template>
<ais-instant-search
- :middlewares="middlewares"
+ :insights="insights"
>
<!-- widgets -->
</ais-instant-search>
</template>
<script>
- import { createInsightsMiddleware } from 'instantsearch.js/es/middlewares';
- const insightsMiddleware = createInsightsMiddleware({
- insightsInitParams: {
- useCookie: false,
- }
- });
export default {
data() {
return {
- middlewares: [insightsMiddleware],
+ insights: {
+ insightsInitParams: {
+ useCookie: false,
+ }
+ }
}
},
}
</script>
Update search-insights
Starting from v4.9.0, Vue InstantSearch can load search-insights
for you so the insightsClient
option is no longer required.
If you prefer loading it yourself, make sure to update search-insights
to at least v2.4.0 and forward the reference to insights
.
If you’re using the UMD bundle with a <script>
tag, make sure to update the full code snippet (not just the version):
1
2
3
4
5
6
7
8
<script>
var ALGOLIA_INSIGHTS_SRC = "https://cdn.jsdelivr.net/npm/search-insights@2.17.3/dist/search-insights.min.js";
!function(e,a,t,n,s,i,c){e.AlgoliaAnalyticsObject=s,e[s]=e[s]||function(){
(e[s].queue=e[s].queue||[]).push(arguments)},e[s].version=(n.match(/@([^\/]+)\/?/) || [])[1],i=a.createElement(t),c=a.getElementsByTagName(t)[0],
i.async=1,i.src=n,c.parentNode.insertBefore(i,c)
}(window,document,"script",ALGOLIA_INSIGHTS_SRC,"aa");
</script>
If you’re using a package manager, you can upgrade it to the latest version.
1
npm install search-insights
Now you can pass the reference to the insights
option.
1
2
3
4
5
6
7
8
9
<template>
<ais-instant-search
:insights="{
insightsClient: window.aa
}"
>
<!-- widgets -->
</ais-instant-search>
</template>
Otherwise, you can remove it and let Vue InstantSearch handle it for you.
Remove search-insights
Starting from v4.9.0, Vue InstantSearch loads search-insights
for you from jsDelivr if not detected in the page. If you’ve installed search-insights
, you can now remove it.
If you’re using the UMD bundle with a <script>
tag, you can remove the snippet in any page that uses Vue InstantSearch:
1
2
3
4
5
6
7
8
- <script>
- var ALGOLIA_INSIGHTS_SRC = "https://cdn.jsdelivr.net/npm/search-insights@2.17.3/dist/search-insights.min.js";
-
- !function(e,a,t,n,s,v,i,c){e.AlgoliaAnalyticsObject=s,e[s]=e[s]||function(){
- (e[s].queue=e[s].queue||[]).push(arguments)},e[s].version=(n.match(/@([^\/]+)\/?/) || [])[1],i=a.createElement(t),c=a.- getElementsByTagName(t)[0],
- i.async=1,i.src=n,c.parentNode.insertBefore(i,c)
- }(window,document,"script",ALGOLIA_INSIGHTS_SRC,"aa");
- </script>
If you’re using a package manager, you can remove it from your dependencies.
1
npm uninstall search-insights
Then you can remove the reference to search-insights
from your code:
1
2
3
4
5
6
7
8
9
<template>
<ais-instant-search
:insights="{
- insightsClient: window.aa
}"
>
<!-- widgets -->
</ais-instant-search>
</template>
Vue InstantSearch loads search-insights
from the jsDelivr CDN, which requires that your site or app allows script execution from foreign resources. Check the security best practices for recommendations.
Upgrade from v3 to v4
You can use Vue InstantSearch v4 with Vue 2 and Vue 3.
Server-side rendering
Using Vue InstantSearch v4 introduces one breaking change in the server-side rendering.
findResultsState()
in serverPrefetch
now takes component
and renderToString: (app) => Promise<string>
in the first argument.
Vue 3
1
2
3
4
5
6
7
8
9
10
import { renderToString } from '@vue/server-renderer';
// ...
serverPrefetch() {
return this.instantsearch.findResultsState({
component: this,
renderToString,
});
},
Vue 2
The renderToString function from vue-server-renderer/basic
is callback-based. You need to promisify it like this:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import _renderToString from 'vue-server-renderer/basic';
function renderToString(app) {
return new Promise((resolve, reject) => {
_renderToString(app, (err, res) => {
if (err) reject(err);
resolve(res);
});
});
}
// ...
serverPrefetch() {
return this.instantsearch.findResultsState({
component: this,
renderToString,
});
},
If you upgrade to Vue 3
Importing the library
The path to import Vue InstantSearch has changed for Vue 3, and is now:
1
2
3
4
import InstantSearch from 'vue-instantsearch/vue3/es';
// ...
app.use(InstantSearch);
Vue Router v4
If you’re using Vue Router and upgrading it to v4, currentRoute
is now a reference instead of an object.
1
2
3
4
5
// previously
vueRouter.currentRoute.query
// now
vueRouter.currentRoute.value.query
It’s not directly related to Vue InstantSearch, but if you are upgrading to Vue Router 4 along with Vue 3, you will encounter this issue anyway. It’s mentioned here for your information.
Upgrade from v2 to v3
This guide contains all the major changes that were introduced in v3, and how to migrate from v2.
Vue InstantSearch v3 uses InstantSearch.js v4, so all breaking changes using the InstantSearch.js API also apply here. You can find more information in its respective upgrade guide.
Federated search (multi-index)
If you were using a ais-configure
or a ais-search-box
to synchronize between two ais-instant-search
instances, you can now replace either one of them with the new ais-index
widget like this:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
<ais-instant-search index-name="parent">
<!-- root widgets are synchronized with every child -->
<ais-searchbox />
<ais-hits />
<ais-index index-name="child">
<!-- same query is used as parent -->
<ais-hits />
<!-- but this refinement list is only for the child -->
<ais-refinement-list attribute="brands" />
</ais-index>
</ais-instant-search>
</template>
ais-autocomplete
The indices
option has been removed in favor of ais-index
.
This means that:
1
2
3
4
5
<template>
<ais-autocomplete :indices="[{ name: 'additional' }]">
<!-- custom rendering -->
</ais-autocomplete>
</template>
Should be replaced with:
1
2
3
4
5
6
<template>
<ais-index index-name="additional" />
<ais-autocomplete>
<!-- custom rendering -->
</ais-autocomplete>
</template>
ais-state-results
This widget used to expose the search results only, you can now access the search parameters as well. This lets you use query information to perform view logic instead of waiting for the response to retrieve the data.
1
2
3
4
5
<ais-state-results>
- <template v-slot="{ query, nbHits }">
+ <template v-slot="{ state: { query }, results: { nbHits } }">
</template>
<ais-state-results>
The results you have access to are always scoped to the current index.
Routing and URLs
Since the introduction of federated search, it’s now possible to have multiple indices in a single app. This means that the default state mapping for routing now takes multiple indices into account. If you want to keep on using the same URLs as before, make the following change:
1
2
3
4
5
6
7
8
9
10
11
12
13
- import { simple as simpleMapping } from 'instantsearch.js/es/lib/stateMappings';
+ import { singleIndex as singleIndexMapping } from 'instantsearch.js/es/lib/stateMappings';
export default {
data() {
return {
routing: {
- stateMapping: simpleMapping(),
+ stateMapping: singleIndexMapping('myIndex'),
}
}
}
}
For more information about custom routers, consult the InstantSearch.js upgrade guide.
Server-side rendering (SSR)
This major version of Vue InstantSearch also includes an overhaul of the server-side rendering implementation. This takes two points into consideration:
- work fully with
serverPrefetch
- no repetition needed between the template and parameters
To do this the following changes have been made:
createInstantSearch
->createServerRootMixin
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { createServerRootMixin } from 'vue-instantsearch';
const app = new Vue({
mixins: [
createServerRootMixin({
searchClient,
indexName: 'instant_search',
}),
],
serverPrefetch() {
return this.instantsearch.findResultsState(this);
},
beforeMount() {
if (typeof window === 'object' && window.__ALGOLIA_STATE__) {
this.instantsearch.hydrate(window.__ALGOLIA_STATE__);
delete window.__ALGOLIA_STATE__;
}
},
router,
render: h => h(App),
});
- using a compatible router
The default routers in InstantSearch.js are based around browser location, and thus won’t work on the server. An example router for Vue SSR can be made like this:
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import qs from 'qs';
// get this from the environment, will be different in nuxt vs. vue ssr
const serverUrl = context ? context.url : undefined;
const router = {
read() {
const url = serverUrl
? serverUrl
: typeof window.location === 'object'
? window.location.href
: '';
const search = url.slice(url.indexOf('?'));
return qs.parse(search, {
ignoreQueryPrefix: true,
});
},
write(routeState) {
const query = qs.stringify(routeState, {
addQueryPrefix: true,
});
if (typeof history === 'object') {
history.pushState(routeState, null, query);
}
},
createURL(routeState) {
const query = qs.stringify(routeState, {
addQueryPrefix: true,
});
return query;
},
onUpdate(callback) {
if (typeof window !== 'object') {
return;
}
this._onPopState = () => {
if (this.writeTimer) {
window.clearTimeout(this.writeTimer);
this.writeTimer = undefined;
}
callback(this.read());
};
window.addEventListener('popstate', this._onPopState);
},
dispose() {
if (this._onPopState && typeof window == 'object') {
window.removeEventListener('popstate', this._onPopState);
}
// Don't write on dispose to prevent double entries on navigation
},
};
A full example can be found in the GitHub repository. Read more detail in the dedicated SSR guide.
Helper v3.x.x
This release includes version 3 of the algoliasearch-helper
package. If you are using the built-in widgets or connectors, nothing changes for you.
This version of algoliasearch-helper
no longer includes Lodash, which significantly reduces its bundle size (from 27.5 KB to 9.1 KB Gzipped).
Upgrade from v1 to v2
This guide contains all the major changes that were introduced in v2 and how to migrate from v1. You can still find the documentation for Vue InstantSearch v1.
Renamed components
Some components have been renamed to be more consistent with other InstantSearch flavors.
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, for example, 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
This widget is the replacement of query-parameters
on ais-index
.
This component can be used for conditional rendering, and getting information that’s not returned in ais-hits
.
To be used together with ais-hierarchical-menu
.
A single-selectable menu, rendered inside a select
Shows the current refinements, and allows them to be unset.
Replaces :stack="true"
on ais-results
(now called ais-hits
).
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.
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
- results -> hits
- anything in a list -> items / item
- header / footer -> wrap the widget in an
ais-panel
If you see anything not mentioned here, please complete the feedback form.
Removed options
query-parameters
This is now handled with 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-box
es of which you hide one, or with ais-configure
on both indices, and synchronizing between those like that.
appId
andapiKey
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
26
27
<template>
- <ais-index
- app-id="appID"
- api-key="apiKey"
- index-name="myIndex"
- >
+ <ais-instant-search
+ :search-client="searchClient"
+ index-name="myIndex"
+ >
<slot>My app</slot>
+ </ais-instant-search>
- </ais-index>
</template>
+ <script>
+ import { liteClient as 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. For more information, see Conditional requests.
Removed components
ais-input
This component has been removed with as alternative having two options:
- use
ais-search-box
and style it to not include the extra items - 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
v-slot="{ 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 Algolia follows the SUIT CSS methodology now, rather than the previous, slightly wrong, implementation of ‘block, element and modifier’ (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
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.
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 complete the feedback form.
Routing
You’re now able to use routing in InstantSearch with, or without Vue Router.
Changing props on ais-instant-search
It’s possible to change props on ais-instant-search
, except routing
. If you have a need for that to be changed as well, please complete the feedback form.