vue-typeahead3
⌨️ vue-typeahead3
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.
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 | :heavy_check_mark: | Specifies where the selected item is stored in the parent component. | ||
suggestions | Record<string, string>[] (Array of Objects) |
:heavy_check_mark: | Suggestions to filter | |
placeholder | string |
:x: | Type to search... |
Placeholder for search input |
searchKey | string |
:x: | value |
Specifies the key to use for the actual search. Must either equal categoryKey or valueKey |
categoryKey | string |
:x: | category |
Specifies the key to use for the categories. |
valueKey | string |
:x: | value |
Specifies the key to use for the value. |
maxResults | number |
:x: | 5 |
Specifies the max amount of suggestions displayed within the dropdown. |
Dependencies
@typescript-eslint/eslint-plugin: ^5.2.0@typescript-eslint/parser: ^5.3.0@vitejs/plugin-vue: ^1.6.1@vue/compiler-sfc: ^3.2.6dart-sass: ^1.25.0eslint: ^8.2.0eslint-config-prettier: ^8.3.0eslint-plugin-vue: ^8.0.3prettier: 2.4.1sass: ^1.41.1typescript: ^4.4.3vite: ^2.5.4vite-plugin-eslint: ^1.3.0vue-eslint-parser: ^8.0.1vue-tsc: ^0.29.5