vue-typeahead3 is a super lightweight (only 3.65Kb zipped) typeahead / autocompletion component for Vue.js 3. It's written in TypeScript using Vue.js 3 Composition API.

Installation

1// NPM
2$ npm install vue-typeahead3
3
4// Yarn
5$ yarn add vue-typeahead3

After the package got installed things are straight forward. Simply import and register the component:

1// src/main.js
2import { createApp } from 'vue'
3...
4import typeahead from 'vue-typeahead3'
5import "vue-typeahead3/dist/vue-typeahead.css";
6
7const app = createApp(App)
8...
9app.use(typeahead) // register typeahead component
10...
11app.mount('#app')

Usage

Once the plugin is registered you can straight up use it in your app.

Basic example:

1<template>
2    <typeahead :data="suggestions" v-model="food" />
3    <small>You selected: {{ food }}</small>
4</template>
5
6<script>
7...
8data() {
9  return {
10    suggestions: [
11    {
12      value: "Banana",
13      category: "Fruit",
14    },
15    {
16      value: "Shallots",
17      category: "Vegetable",
18    },
19    {
20      value: "Ananas",
21      category: "Fruit",
22    },
23    {
24      value: "Avocado",
25      category: "Fruit",
26    },
27    {
28      value: "Garlic",
29      category: "Vegetable",
30    },
31  ],
32  food: "",
33 }
34}
35...
36</script

Configuration