Vue + Autocomplete

Get started

Creating the template

1<template>
2  <div class="app-container">
3    <h1>Vue Application</h1>
4    <div id="autocomplete" />
5  </div>
6</template>

Getting started (get a free account here)

1<script>
2import { h, Fragment, render, onMounted } from 'vue';
3import algoliasearch from 'algoliasearch/lite';
4import { autocomplete, getAlgoliaResults } from '@algolia/autocomplete-js';
5
6import '@algolia/autocomplete-theme-classic';
7
8export default {
9  name: 'App',
10};
11</script>

Mounting the autocomplete

1export default {
2  name: 'App',
3  setup() {
4    onMounted(() => {
5      autocomplete({
6        container: '#autocomplete',
7        openOnFocus: true,
8        getSources({ query }) {
9          return [
10            {
11              sourceId: 'products',
12              getItems() {
13                return getAlgoliaResults({
14                  searchClient,
15                  queries: [
16                    {
17                      indexName: 'instant_search',
18                      query,
19                      params: {
20                        hitsPerPage: 10,
21                        attributesToSnippet: ['name:10', 'description:35'],
22                        snippetEllipsisText: '…',
23                      },
24                    },
25                  ],
26                });
27              },
28              // ...
29            },
30          ];
31        },
32        renderer: {
33          createElement: h,
34          Fragment,
35        },
36        render({ children }, root) {
37          render(children, root);
38        },
39      });
40    });
41  },
42};
43</script>
44;