Skip to content

Lightweight (<3KB) vue library offering context-sensitive suggestions in your textareas

License

Notifications You must be signed in to change notification settings

7PH/vue-smart-suggest

Repository files navigation

Vue Smart Suggest is a lightweight vue library offering dynamic, context-sensitive suggestions for your text areas. It can be fully customized with custom components and weights less than 3kb minified and gzipped.

Check out the documentation website to try it out 😊

Like this project? Give a star 🌟

Getting started

  1. Install using a package manager

    npm i --save vue-smart-suggest
    # or
    yarn add vue-smart-suggest
  2. Import SmartSuggest and define suggestion trigger(s)

    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 text area with <SmartSuggest />

    <SmartSuggest :triggers="[userMentionTrigger]">
        <textarea />
    </SmartSuggest>
  4. That's it, your textarea will show up suggestions as you type @!

  5. Check-out the customization guide or the API 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 text area.

Useful links

Documentation

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.