# vue-smart-suggest

Latest version **1.2.0** (published 2026-09-03) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue-smart-suggest
pnpm add vue-smart-suggest
yarn add vue-smart-suggest
bun add vue-smart-suggest
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2026-09-03 |
| First published | 2023-12-29 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 34.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | 7PH |
| Maintainers | 7ph |

## Links

- npm: https://www.npmjs.com/package/vue-smart-suggest
- npm.io page: https://npm.io/package/vue-smart-suggest

## Dependencies (1)

- [textarea-caret](https://npm.io/package/textarea-caret.md) ^3.1.0

## Recent versions

- 1.2.0 (latest) — 2026-09-03
- 1.1.2 — 2026-09-02
- 1.1.1 — 2025-09-03
- 1.1.0 — 2024-01-08
- 1.0.0 — 2023-12-31
- 0.2.0 — 2023-12-31
- 0.1.0 — 2023-12-30
- 0.0.11 — 2023-12-29
- 0.0.10 — 2023-12-29
- 0.0.9 — 2023-12-29
- 0.0.8 — 2023-12-29
- 0.0.7 — 2023-12-29
- 0.0.6 — 2023-12-29
- 0.0.5 — 2023-12-29
- 0.0.4 — 2023-12-29
- … 3 more at https://npm.io/package/vue-smart-suggest/versions

## README

<img src="./assets/intro.gif" alt="">

Vue Smart Suggest is a lightweight vue library offering dynamic, context-sensitive suggestions for your textareas and inputs. It can be fully customized with custom components and weights less than `3.5kb` minified and brotlied.

Check out the [documentation website](https://7ph.github.io/vue-smart-suggest/#/) to try it out 😊

<p align="right">
    Like this project? Give a star 🌟
</p>

## Getting started

1. Install using a package manager

    ```bash
    npm i --save vue-smart-suggest
    # or
    yarn add vue-smart-suggest
    ```

2. Import `SmartSuggest` and define suggestion trigger(s)

    ```ts
    import { SmartSuggest, Trigger } from 'vue-smart-suggest';

    const userMentionTrigger: Trigger = {
        char: '@',
        items: [{ value: 'Joe' }, { value: 'Jane' }],
    };
    ```

    \*minimal example, check Trigger type definition to see all options

3. Enhance a textarea or an input with `<SmartSuggest />`

    ```html
    <SmartSuggest :triggers="[userMentionTrigger]">
        <textarea />
    </SmartSuggest>

    <SmartSuggest :triggers="[userMentionTrigger]">
        <input type="text" />
    </SmartSuggest>
    ```

4. That's it, suggestions will show up as you type `@`!

    Input types that expose no caret, such as `email` or `number`, are accepted but never suggest anything.

5. Check-out the [customization guide](https://7ph.github.io/vue-smart-suggest/#/customize) or the [API](https://7ph.github.io/vue-smart-suggest/api-docs/) to get the most of this library

## Dependencies

-   This library requires `vue 3.x`.
-   This library has a single dependency, `textarea-caret` which helps finding the position of the cursor inside a textarea or an input.

## Useful links

Documentation

-   Try out a simple [demo](https://7ph.github.io/vue-smart-suggest/) on the documentation website.
-   For styling tips, check the [customization guide](https://7ph.github.io/vue-smart-suggest/#/customize).
-   Check out the [api documentation](https://7ph.github.io/vue-smart-suggest/api-docs/) for reference.
-   Admire the [>98% coverage report](https://7ph.github.io/vue-smart-suggest/coverage/)

## Contributing

Having trouble? Found a bug? Want to contribute? Any kind of contribution is welcome. If you have any questions, please open an issue or create a pull request.

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