Skip to content
This repository has been archived by the owner on Aug 29, 2024. It is now read-only.
/ vue-typeahead3 Public archive

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

License

Notifications You must be signed in to change notification settings

0x0dr1y/vue-typeahead3

Repository files navigation

⌨️ vue-typeahead3 Vue version NPM version NPM downloads size Pipeline

Table of Contents

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.

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')

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
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.