Install & Download:
# Yarn
$ yarn add vue-smart-suggest
# NPM
$ npm install vue-smart-suggestDescription:
Vue Smart Suggest is a lightweight Vue component that adds dynamic, context‑sensitive suggestions to textarea elements.
The component relies on the textarea-caret package to track cursor position and display suggestions at the right spot.
You can replace the default suggestion list with your own Vue components.
Features
- Suggestions appear when the user types a trigger character like
@or#. - Pass your own Vue components to control how each suggestion looks.
- Uses the
textarea-caretlibrary to place the suggestion dropdown exactly where the cursor is. - Define triggers with a character and an array of items; additional options like filtering and async loading are available.
Use Cases
- Allow users to tag colleagues by typing
@followed by a name. - Provide trending hashtags when the user types
#. - Create a slash‑command interface (e.g.,
/bold) for formatting shortcuts. - Suggest product names or codes inside textarea fields.
Preview
How to Use It
1. Import the SmartSuggest component and the Trigger type. Define your triggers to specify which characters activate the suggestion list and what items to display.
import { SmartSuggest, Trigger } from 'vue-smart-suggest';
const userMentionTrigger: Trigger = {
char: '@',
items: [{ value: 'Joe' }, { value: 'Jane' }],
};2. Wrap your textarea element with the SmartSuggest component. Pass the triggers array as a prop to enable the functionality.
<SmartSuggest :triggers="[userMentionTrigger]">
<textarea />
</SmartSuggest>FAQs
Q: Does this library support Vue 2?
A: No, the library requires Vue 3.x to function correctly.
Q: Can I style the suggestion dropdown?
A: Yes, you can use custom components to override the default appearance.
Q: What happens if I have multiple triggers?
A: You pass an array of trigger objects to the triggers prop. The library handles each defined character independently.
