⌨️ vue-typeahead3

Table of Contents

• About
• Installation
• Usage
  • Configuration

About

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

Currently the plugin is available via NPM and Yarn. To install it use one of the two package managers.

// NPM
$ npm install vue-typeahead3

// Yarn
$ yarn add vue-typeahead3

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

// src/main.js
import { createApp } from 'vue'
...
import typeahead from 'vue-typeahead3'
import "vue-typeahead3/dist/vue-typeahead.css";

const app = createApp(App)
...
app.use(typeahead) // register typeahead component
...
app.mount('#app')

Usage

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

Basic example:

<template>
    <typeahead :data="suggestions" v-model="food" />
    <small>You selected: {{ food }}</small>
</template>

<script>
...
data() {
  return {
    suggestions: [
    {
      value: "Banana",
      category: "Fruit",
    },
    {
      value: "Shallots",
      category: "Vegetable",
    },
    {
      value: "Ananas",
      category: "Fruit",
    },
    {
      value: "Avocado",
      category: "Fruit",
    },
    {
      value: "Garlic",
      category: "Vegetable",
    },
  ],
  food: "",
 }
}
...
</script

Configuration

The example above only shows the base usage of the component. You can customize the overall component by using the provided props listed below:

property	type	required	default	description
v-model		✔️		Specifies where the selected item is stored in the parent component.
suggestions	Record<string, string>[] (Array of Objects)	✔️		Suggestions to filter
placeholder	string	❌	Type to search...	Placeholder for search input
searchKey	string	❌	value	Specifies the key to use for the actual search. Must either equal categoryKey or valueKey
categoryKey	string	❌	category	Specifies the key to use for the categories.
valueKey	string	❌	value	Specifies the key to use for the value.
maxResults	number	❌	5	Specifies the max amount of suggestions displayed within the dropdown.