Learn how to embed Autocomplete into a Vue application.
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
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.
Begin by adding a container for your autocomplete menu. This example adds a
autocomplete as an
Then, import the necessary packages for a basic implementation. Since the example queries an Algolia index, it imports the
getAlgoliaHits from the
autocomplete-js package. Finally, it imports
autocomplete-theme-classic package for some out of the box styling.
Include some boilerplate to insert the autocomplete into:
autocomplete-js package provides a built-in
getAlgoliaHits 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.
This is because the default Autocomplete implementation uses Preact's version of
render. Without providing Vue's version of these, the Autocomplete instance won't render the views properly.
Next, to display the results from Algolia, you need to define an
item template. If you're using the highlighting and snippeting utilities, there's one thing to keep in mind: you must pass them Vue's
createElement function. Without doing this, the utilities default to
preact.createElement and won't work properly.
The highlighting and snippeting utilities are:
Here's an example of a custom
item template using
Keep in mind that you should use JSX syntax for your templates.
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.