> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Use Autocomplete with Vue

> Learn how to embed Autocomplete into a Vue application.

<Tip>
  Autocomplete is also available as an experimental widget in InstantSearch,
  making it easier to integrate into your search experience.
  For more information,
  see the API reference for [InstantSearch.js](/doc/api-reference/widgets/autocomplete/js) or
  [React InstantSearch](/doc/api-reference/widgets/autocomplete/react).
</Tip>

You can integrate an Autocomplete instance into a Vue application using [Vue's Composition API](https://vuejs.org/guide/extras/composition-api-faq.html#why-composition-api).
Specifically you can instantiate an Autocomplete instance in the [`onMounted`](https://v3.vuejs.org/api/composition-api.html#lifecycle-hooks)
lifecycle hook in the [`setup`](https://v3.vuejs.org/guide/composition-api-setup.html) function.

This example uses an [Algolia index](https://support.algolia.com/hc/en-us/articles/4406981910289-What-is-an-index-)
of [ecommerce products](https://github.com/algolia/datasets/tree/master/ecommerce) as a source.
You could use any other source or sources you like.

## Before you begin

The guide assumes that you're familiar with the [basic Autocomplete configuration options](/doc/ui-libraries/autocomplete/core-concepts/basic-configuration-options)
and have an existing [Vue 3 app](https://v3.vuejs.org/) to which you want to add an Autocomplete menu.

## Get started

Start by adding a container for your autocomplete menu.
This example adds a `div` with `autocomplete` as an [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).

```jsx Vue icon=code theme={"system"}
<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`](https://www.npmjs.com/package/algoliasearch) package,
[`autocomplete`](/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/autocomplete) and
[`getAlgoliaResults`](/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/getAlgoliaResults) from the
[`autocomplete-js`](/doc/ui-libraries/autocomplete/api-reference/autocomplete-js) package.
Finally, it imports [`autocomplete-theme-classic`](/doc/ui-libraries/autocomplete/api-reference/autocomplete-theme-classic) package for some out of the box styling.

Depending on your desired [sources](/doc/ui-libraries/autocomplete/core-concepts/sources),
you may need to import other packages including [plugins](/doc/ui-libraries/autocomplete/core-concepts/plugins).

Include some starter code to insert the autocomplete menu into:

```jsx Vue icon=code theme={"system"}
<template>
  <div class="app-container">
    <h1>Application title</h1>
    <div id="autocomplete" />
  </div>
</template>

<script>
import { h, Fragment, render, onMounted } from "vue";
import { liteClient as algoliasearch } from "algoliasearch/lite";
import { autocomplete, getAlgoliaResults } from "@algolia/autocomplete-js";

import "@algolia/autocomplete-theme-classic";

export default {
  name: "App",
};
</script>
```

## Add an Algolia source

The [`autocomplete-js`](/doc/ui-libraries/autocomplete/api-reference/autocomplete-js)
package provides a built-in [`getAlgoliaResults`](/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/getAlgoliaResults)
function for querying an Algolia index.
It requires an [Algolia search client](/doc/libraries/sdk/install)
initialized with an [Algolia application ID and API key](/doc/guides/sending-and-managing-data/send-and-update-your-data/how-to/importing-with-the-api#required-credentials).
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`](/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/getAlgoliaResults) function,
see the [Getting Started guide](/doc/ui-libraries/autocomplete/introduction/getting-started).

## Attach the autocomplete menu to the DOM

You can instantiate and mount your Autocomplete instance in the [`onMounted`](https://vuejs.org/api/composition-api-lifecycle.html#onmounted)
lifecycle hook in the [`setup`](https://v3.vuejs.org/guide/composition-api-setup.html) function.
Doing so requires passing the `renderer` and `render` parameters.

This is because the default Autocomplete implementation uses [Preact's](https://preactjs.com/) version of `createElement`,
`Fragment` and `render`.
Without providing Vue's version of these,
the Autocomplete instance won't render the views properly.

```jsx Vue icon=code theme={"system"}
<template>
  <div className="container">
    <h1>Autocomplete with Vue</h1>
    <div id="autocomplete" />
  </div>
</template>

<script>
import { h, Fragment, render, onMounted } from "vue";
import { liteClient as 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",
                      params: {
                        query,
                        hitsPerPage: 10,
                        attributesToSnippet: ["name:10", "description:35"],
                        snippetEllipsisText: "…",
                      },
                    },
                  ],
                });
              },
              // ...
            },
          ];
        },
        renderer: { createElement: h, Fragment, render },
      });
    });
  },
};
</script>
```

## Customize templates

Next, to display the results from Algolia,
you need to define an [`item` template](/doc/ui-libraries/autocomplete/core-concepts/templates#param-templates-item).

```jsx Vue icon=code theme={"system"}
<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={item.image}
                            alt={item.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 },
      });
    });
  },
};
</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](/doc/ui-libraries/autocomplete/guides/creating-a-renderer).
This guide outlines how to create a custom React renderer,
but the underlying principles are the same for any other frontend framework.