Mention

Used to quickly select and insert mention content via trigger characters (@, #, etc.) in inputs or textareas. Widely used in comments, private messages, and task collaboration scenarios.

Basic Usage

Bind values using v-model and configure candidate lists with options. Type @ in the input to trigger the suggestion panel.

Current value:

Basic Usage

Avatar Options

Add an avatar field to each option to display user avatars in the dropdown, combined with description to show additional info.

Options with Avatars

Grouped Options

Set the group field to categorize options into groups. Options with the same group value are automatically merged into the same section.

Grouped Options

Multiple Triggers

Specify multiple trigger characters via triggers, such as supporting both @ for people and # for tags. Switch option sources dynamically using the search event.

Current value:

Multiple Triggers

Async Loading

Listen to the search event to initiate network requests. Use :loading="true" to show a loading indicator, then update options when data returns.

Async Loading

Textarea Mode

Set type="textarea" to use mention functionality in a multi-line textarea, supporting all mention features.

Textarea Mode

Custom Filter

Customize filtering logic via the filter-option prop, for example to support Pinyin search. Set to false to disable filtering and display all options.

Custom Filter (Pinyin Support)

Custom Option Rendering

Customize option display content using the #option slot. Slot parameters include option and keyword.

Custom Option Rendering

Word Count

Display character count in real-time when used with maxlength and show-word-limit.

0 / 100

Word Count

Disabled

Set disabled to disable the component. Actions are prevented and the suggestion panel won't trigger.

Disabled

Usage in Nuxt

Mention is fully compatible with Nuxt 3/4 and has been verified in SSR environments. The initial modelValue renders as static text on the server, and interactions activate after client-side hydration.

Nuxt Usage

SSR Considerations:

• ✅ modelValue initial text renders correctly on server
• ✅ Disabled and Readonly states effect on server
• ✅ Multi-size and custom classes render correctly on server
• ⚠️ Dropdown and triggers activate after client-side Hydration
• 💡 Use Nuxt's <ClientOnly> to downgrade interactions to client-side only if needed

SSR Performance

In SSR scenarios, Mention's initial render only includes the input itself. The dropdown panel is not server-rendered (v-show="false"), minimizing impact on first-paint performance.

API

Props

Prop	Description	Type	Default
model-value / v-model	Binding value	string	''
options	Candidate options list	MentionOption[]	[]
triggers	Trigger characters	string[]	['@']
type	Input type	'input' | 'textarea'	'input'
placement	Dropdown direction	'top' | 'bottom'	'bottom'
placeholder	Placeholder text	string	—
disabled	Whether disabled	boolean	false
readonly	Whether readonly	boolean	false
size	Size	'large' | 'default' | 'small'	'default'
maxlength	Max input length	number	—
clearable	Whether clearable	boolean	false
show-word-limit	Whether to show word limit	boolean	false
prefix-icon	Prefix icon	Component	—
suffix-icon	Suffix icon	Component	—
filter-option	Custom filter function, set to false to disable	((keyword, option) => boolean) | false	—
loading	Whether loading	boolean	false
loading-text	Loading text	string	'Loading...'
no-data-text	No data text	string	'No Data'
teleported	Mount dropdown to body	boolean	true
popper-class	Custom dropdown class	string	''
split	Separator appended after selection	string	' '
whole-word	Whether to insert as whole word	boolean	false
autofocus	Auto focus	boolean	false
rows	Textarea rows	number	3
debounce	Search debounce delay (ms)	number	100
validate-event	Whether to trigger form validation	boolean	true
theme-overrides	Theme override variables	ComponentThemeVars	—

MentionOption

Field	Description	Type
value	Unique identifier (required)	string
label	Display label	string
disabled	Whether disabled	boolean
avatar	Avatar URL	string
description	Description info	string
group	Group name	string

Events

Event	Description	Parameters
update:modelValue	Triggered on value change	(value: string) => void
input	Triggered on input	(value: string) => void
change	Triggered on blur	(value: string) => void
focus	Triggered on focus	(event: FocusEvent) => void
blur	Triggered on blur	(event: FocusEvent) => void
clear	Triggered on clear	() => void
search	Triggered on search	(keyword: string, trigger: string) => void
select	Triggered on selecting an option	(option: MentionOption, trigger: string) => void
open	Triggered when opening dropdown	() => void
close	Triggered when closing dropdown	() => void
keydown	Triggered on keydown	(event: KeyboardEvent) => void

Slots

Slot	Description	Scope
option	Custom option rendering	{ option: MentionOption, keyword: string }
empty	Custom no data content	—
loading	Custom loading content	—
prefix	Custom prefix content	—
suffix	Custom suffix content	—

Expose

Prop/Method	Description	Type
ref	Input/Textarea DOM element	HTMLInputElement | HTMLTextAreaElement
wrapperRef	Wrapper DOM element	HTMLElement
focus	Focus the input	() => void
blur	Blur the input	() => void
clear	Clear the input	() => void
insertMention	Programmatically insert mention	(option: MentionOption, trigger?: string) => void

Keyboard Operations

Key	Description
↑ / ↓	Navigate highlight options
Enter	Select highlighted option
Tab	Select highlighted option (closes if none)
Escape	Close dropdown panel

Theme Variables

Variable	Description	Default
--yh-mention-font-size	Font size	var(--yh-font-size-base)
--yh-mention-bg-color	Background color	var(--yh-fill-color-blank)
--yh-mention-border-color	Border color	var(--yh-border-color)
--yh-mention-border-radius	Border radius	var(--yh-border-radius-base)
--yh-mention-height-default	Default height	var(--yh-component-size-default)
--yh-mention-dropdown-shadow	Dropdown shadow	var(--yh-box-shadow-light)