# vue-typeahead3

> A super lightweight typeahead / autocompletion component for Vue.js 3. It's written in TypeScript using Vue.js 3 Composition API.

Latest version **1.2.8** (published 2024-05-22) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install vue-typeahead3
pnpm add vue-typeahead3
yarn add vue-typeahead3
bun add vue-typeahead3
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.2.8 |
| Published | 2024-05-22 |
| First published | 2021-09-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 18.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | MrDeerly |
| Maintainers | mrdeerly |
| Keywords | vue, vue3, search, suggestion, input, list, autocomplete, autosuggest, searchInput, typeahead, next, typescript |

## Links

- npm: https://www.npmjs.com/package/vue-typeahead3
- Repository: https://github.com/MrDeerly/vue-typeahead3
- Issues: https://github.com/MrDeerly/vue-typeahead3/issues
- npm.io page: https://npm.io/package/vue-typeahead3

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 1.2.8 (latest) — 2024-05-22
- 1.2.6 — 2024-05-22
- 1.2.5 — 2024-05-22
- 1.2.4 — 2023-08-01
- 1.2.3 — 2023-07-24
- 1.2.2 — 2023-07-10
- 1.2.0 — 2023-05-15
- 1.1.3 — 2021-11-15
- 1.1.1-rc2 — 2021-11-15
- 1.1.0 — 2021-11-15
- 1.0.0 — 2021-09-19

## README

# ⌨️ vue-typeahead3 ![Vue version](https://img.shields.io/badge/vue-3.2.6-brightgreen.svg) [![NPM version](https://img.shields.io/npm/v/vue-typeahead3.svg)](https://npmjs.com/package/vue-typeahead3) [![NPM downloads](https://img.shields.io/npm/dm/vue-typeahead3.svg)](https://npmjs.com/package/vue-typeahead3) ![size](https://img.shields.io/bundlephobia/min/vue-typeahead3) [![Pipeline](https://github.com/MrDeerly/vue-typeahead3/actions/workflows/main.yml/badge.svg)](https://github.com/MrDeerly/vue-typeahead3/actions/workflows/main.yml)
<div align="center">
<img src="https://s9.gifyu.com/images/typeahead.gif" width="350">
</div>

## Table of Contents

- [About](#sectionAbout)
- [Installation](#sectionInstall)
- [Usage](#sectionUsage)
  - [Configuration](#sectionConfiguration)

## About

<a name="sectionAbout"/>

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

<a name="sectionInstall"/>
Currently the plugin is available via NPM and Yarn. To install it use one of the two package managers.

```javascript
// 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:

```javascript
// 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

<a name="sectionUsage"/>

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

**Basic example**:

```jsx
<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

<a name="sectionConfiguration"/>
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. <br/> **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.                                  |

---
_Source: https://npm.io/package/vue-typeahead3 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._