Using Autocomplete with Vue
You can integrate an Autocomplete instance into a Vue application using Vue’s Composition API. Specifically you can instantiate an Autocomplete instance in the onMounted lifecycle hook in the setup function.
This example uses an Algolia index of e-commerce products as a source. You could use any other source or sources you like.
Prerequisites
This tutorial assumes that you have:
- an existing Vue (v3) application where you want to implement the autocomplete menu
- familiarity with the basic Autocomplete configuration options
Since Vue’s Composition API is available starting in Vue 3, you can only use this guide for Vue 3 applications.
Getting started
Begin by adding a container for your autocomplete menu. This example adds a div with autocomplete as an id.
1
2
3
4
5
6
<template>
<div class="app-container">
<h1>Vue Application</h1>
<div id="autocomplete" />
</div>
</template>
Then, import the necessary packages for a basic implementation. Since the example queries an Algolia index, it imports the algoliasearch package, autocomplete and getAlgoliaResults from the autocomplete-js package. Finally, it imports autocomplete-theme-classic package for some out of the box styling.
Depending on your desired sources, you may need to import other packages including plugins.
Include some boilerplate to insert the autocomplete into:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
<div class="app-container">
<h1>Application title</h1>
<div id="autocomplete" />
</div>
</template>
<script>
import { h, Fragment, render, onMounted } from 'vue';
import algoliasearch from 'algoliasearch/lite';
import { autocomplete, getAlgoliaResults } from '@algolia/autocomplete-js';
import '@algolia/autocomplete-theme-classic';
export default {
name: 'App',
};
</script>
Adding an Algolia source
The autocomplete-js package provides a built-in getAlgoliaResults function for querying an Algolia index. It requires an Algolia search client initialized with an Algolia application ID and API key. It lets you search into your Algolia index using an array of queries, which defines one or more queries to send to the index.
For more information how to use the getAlgoliaResults function, see the Getting Started guide.
Mounting the autocomplete
You can instantiate and mount your Autocomplete instance in the onMounted lifecycle hook in the setup function. Doing so requires passing the renderer and render parameters.
This is because the default Autocomplete implementation uses Preact’s version of createElement, Fragment and render. Without providing Vue’s version of these, the Autocomplete instance won’t render the views properly.
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
<template>
<div className="container">
<h1>Autocomplete with Vue</h1>
<div id="autocomplete" />
</div>
</template>
<script>
import { h, Fragment, render, onMounted } from 'vue';
import algoliasearch from 'algoliasearch/lite';
import { autocomplete, getAlgoliaResults } from '@algolia/autocomplete-js';
import '@algolia/autocomplete-theme-classic';
export default {
name: 'App',
setup() {
onMounted(() => {
autocomplete({
container: '#autocomplete',
openOnFocus: true,
getSources({ query }) {
return [
{
sourceId: 'products',
getItems() {
return getAlgoliaResults({
searchClient,
queries: [
{
indexName: 'instant_search',
query,
params: {
hitsPerPage: 10,
attributesToSnippet: ['name:10', 'description:35'],
snippetEllipsisText: '…',
},
},
],
});
},
// ...
},
];
},
renderer: {
createElement: h,
Fragment,
},
render({ children }, root) {
render(children, root);
},
});
});
},
};
</script>
Customizing templates
Next, to display the results from Algolia, you need to define an item template.
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
58
<script>
import { h, Fragment, render, onMounted } from 'vue';
import { autocomplete } from '@algolia/autocomplete-js';
export default {
name: 'App',
setup() {
onMounted(() => {
autocomplete({
// ...
getSources({ query }) {
return [
{
// ...
templates: {
item({ item, components }) {
return (
<div className="aa-ItemWrapper">
<div className="aa-ItemContent">
<div className="aa-ItemIcon">
<img
src={hit.image}
alt={hit.name}
width="40"
height="40"
/>
</div>
<div className="aa-ItemContentBody">
<div className="aa-ItemContentTitle">
<components.Snippet hit={item} attribute="name" />
</div>
<div className="aa-ItemContentDescription">
<components.Snippet
hit={item}
attribute="description"
/>
</div>
</div>
</div>
</div>
);
},
},
},
];
},
renderer: {
createElement: h,
Fragment,
},
render({ children }, root) {
render(children, root);
},
});
});
},
};
</script>
Keep in mind that you should use JSX syntax for your templates.
Further UI customization
If you want to build a custom UI that differs from the autocomplete-js output, check out the guide on creating a custom renderer. This guide outlines how to create a custom React renderer, but the underlying principles are the same for any other front-end framework.
