UI Libraries / Autocomplete / Using Autocomplete with Vue

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 ecommerce products as a source. You could use any other source or sources you like.

Prerequisites

This tutorial assumes that you have:

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.

Did you find this page helpful?