el-mention

Enable user and item tagging in Vue input fields with el-mention.

21|2|Updated Mar 13, 2026
One-click install
npx skills add https://github.com/jiaiyan/element-plus-skills --skill el-mention
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: el-mention
Source: https://github.com/jiaiyan/element-plus-skills/tree/main/components/el-mention
Command: npx skills add https://github.com/jiaiyan/element-plus-skills --skill el-mention

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Mentioning users or items in text inputs can be cumbersome without a lightweight, reusable component. This Skill provides a Vue-based Mention component usage guide and examples to streamline tagging and references in inputs.

Core Features & Use Cases

  • Allows tagging users or items with a prefix (e.g., @).
  • Supports custom label rendering, remote loading, and template customization.
  • Use cases include chat, comment systems, and rich text inputs requiring mentions.

Quick Start

Instantiate the el-mention component in a Vue app and configure a basic options list to enable user tagging.

Frequently Asked Questions about el-mention

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add user tagging to a Vue text input?▼

To add user tagging to a Vue text input, use a configurable mention component that supports prefix triggers like @ to dynamically suggest and insert tags. This streamlines referencing users directly within input fields.

Can I use Element Plus to implement dynamic mention suggestions in a chat box?▼

Yes, you can implement dynamic mention suggestions in a chat box using an Element Plus based component. It handles typical frontend UI scenarios by providing configurable props and events for remote data loading.

What is the best way to customize the label rendering for mentioned items in Vue?▼

The best way to customize label rendering for mentioned items is using a Vue mention component that supports template customization and custom label rendering. This allows flexible visual formatting for tagged users or items.

Does this Vue mention component support remote loading for large user lists?▼

Yes, this Vue mention component supports remote loading to handle large user lists efficiently. You can configure it to fetch options dynamically as users type the tagging prefix.

How do I configure prefix triggers for item tagging in a comment system?▼

To configure prefix triggers for item tagging in a comment system, instantiate a mention component in your Vue app and set up a basic options list. This enables dynamic tagging with a specified prefix like @.