n-dynamic-tags

Manage dynamic tag creation and removal in Vue components with v-model.

8|3|Updated Mar 13, 2026
One-click install
npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-dynamic-tags
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: n-dynamic-tags
Source: https://github.com/jiaiyan/naive-ui-skills/tree/main/components/n-dynamic-tags
Command: npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-dynamic-tags

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Managing multiple user-entered tags in forms can be tedious and error-prone. The n-dynamic-tags component provides a compact, interactive solution to create and remove tags on the fly, with support for custom rendering and input elements.

Core Features & Use Cases

  • Dynamic addition and removal of tags via typing and pressing Enter
  • Customizable rendering through a render-tag option
  • Flexible input customization and slot-based integration for advanced UIs
  • Real-world use cases include tag clouds, keywords, labels, and multi-tag inputs in forms

Quick Start

Use n-dynamic-tags in a Vue template, bind v-model:value to a reactive array, and optionally configure max, type, and render-tag to tailor behavior.

Frequently Asked Questions about n-dynamic-tags

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

FAQPage Schema
How do I implement dynamic tag input in a Vue form?▼

Dynamic tag input in a Vue form is handled by binding a reactive array to the component with v-model, allowing users to add tags on enter and remove them interactively. The component manages creation events and value updates automatically.

Can I customize how individual tags render in a Vue tag input component?▼

Yes, you can customize individual tag rendering in a Vue tag input component using the render-tag prop. This allows you to define custom display logic for tags across search fields and keyword collectors.

Does Vue dynamic tag input support limiting the maximum number of tags?▼

Vue dynamic tag input supports limiting the maximum number of tags using the max prop. You configure this property to restrict user input and prevent exceeding a specified tag count in forms.

How do I replace the default input element in a Vue dynamic tags component?▼

You replace the default input element in a Vue dynamic tags component using the input slot. This slot-based integration allows you to inject custom input elements for advanced UI interactions.

What is the best way to collect multiple keywords in Vue using naive-ui?▼

The best way to collect multiple keywords in Vue using naive-ui is a dynamic tags component supporting add-on-enter and close-remove actions. It provides a compact interactive solution for keyword collection.