n-transfer

Name: n-transfer
Availability: InStock
Author: jiaiyan

Move items between source and target lists with filtering and virtual scrolling.

8|3|Updated Mar 13, 2026

Search Tags:#filters #vue3 #transfer #ui-component #naive-ui #virtual-scroll #dual-list

Ready to run

npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-transfer

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: n-transfer
Source: https://github.com/jiaiyan/naive-ui-skills/tree/main/components/n-transfer
Command: npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-transfer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Coordinate multi-item selection by moving items between source and target lists, enabling intuitive management of large option sets.

Core Features & Use Cases

Dual-list interface with source and target panels to move items between lists
Optional filtering for both source and target lists (source-filterable / target-filterable)
Virtual scrolling support for large datasets to preserve performance
Custom rendering hooks for source/target items and panel titles
Emits update:value to reflect changes and support two-way binding
Practical use cases include permission assignment, team member selection, and feature configuration

Quick Start

Add the n-transfer component to your Vue template, bind v-model to a reactive array, and provide an options array to populate the lists.

Frequently Asked Questions about n-transfer

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

FAQPage Schema

How do I implement a dual-list transfer for assigning permissions in Vue3?▼

A dual-list transfer for Vue3 coordinates multi-item selection by moving options between source and target panels. It emits update:value to reflect changes, supporting two-way binding for intuitive permission assignment and team member selection.

What is the best way to handle large datasets in a transfer UI component?▼

Handling large datasets in a transfer UI component requires virtual scrolling support to preserve performance. This approach renders only visible items, maintaining smooth interactions when configuring features or selecting options from extensive lists.

Can I filter items on both source and target lists in a dual-list interface?▼

Filtering items on both source and target lists in a dual-list interface is supported through source-filterable and target-filterable options. This enables precise navigation when managing large option sets for feature configuration.

How do I customize the rendering of items in a Vue3 transfer component?▼

Customizing the rendering of items in a Vue3 transfer component utilizes custom rendering hooks for source and target items, plus panel titles. This allows developers to tailor the dual-list presentation to specific application needs.

Does naive-ui virtual scroll work with dual-list item transfer for large datasets?▼

Naive-ui virtual scroll works with dual-list item transfer to handle large datasets efficiently. It preserves performance by dynamically rendering visible rows, making it suitable for scenarios with extensive option sets.