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 ๐
-
Install using a package manager
npm i --save vue-smart-suggest # or yarn add vue-smart-suggest
-
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
-
Enhance a text area with
<SmartSuggest />
<SmartSuggest :triggers="[userMentionTrigger]"> <textarea /> </SmartSuggest>
-
That's it, your textarea will show up suggestions as you type
@
! -
Check-out the customization guide or the API to get the most of this library
- 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.
Documentation
- Try out a simple demo on the documentation website.
- For styling tips, check the customization guide.
- Check out the api documentation for reference.
- Admire the >98% coverage report
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.