skills.rest
jiaiyan
jiaiyanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

n-dialog

Create and manage Naive UI modal dialogs via useDialog.

8|3|Updated Mar 13, 2026
Search Tags:#modal#vue3#provider#dialog#component-api#naive-ui#useDialog
One-click install
npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-dialog
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: n-dialog
Source: https://github.com/jiaiyan/naive-ui-skills/tree/main/components/n-dialog
Command: npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-dialog

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Naive UI dialog components simplify building modal confirmations and user interactions by providing a cohesive, programmable API that handles various dialog flows.

Core Features & Use Cases

  • Imperative API: Use useDialog to create dialogs programmatically.
  • Multiple Types: info, success, warning, error variants with customizable actions.
  • Provider & Component Modes: Works with DialogProvider, or declarative usage via n-dialog.
  • Async & Drag Support: Supports async operations and draggable dialogs, with mask control and keyboard shortcuts.
  • Customization: Full control over title, content, actions, icons, and slot content.

Quick Start

Open a dialog using useDialog, customize the title, content, and actions, and handle the result via callbacks.

Frequently Asked Questions about n-dialog

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

FAQPage Schema
How do I create modal dialogs in Vue 3 using Naive UI programmatically?▼

You can create modal dialogs in Naive UI programmatically by utilizing the useDialog hook to call variants like info, warning, or error, enabling imperative dialog management without declarative template syntax.

Can I handle async workflows and draggable interactions within a Naive UI dialog component?▼

Yes, Naive UI dialog components support async workflows and draggable interactions natively, allowing developers to execute asynchronous operations and enable user-driven dialog repositioning with mask control and keyboard shortcuts.

Does useDialog in Naive UI require a specific provider setup for modal management?▼

Yes, using useDialog for imperative modal management requires wrapping your application in DialogProvider, which establishes the context needed to programmatically trigger and control dialog instances.

What is the difference between declarative n-dialog and imperative useDialog API in Vue 3?▼

The declarative n-dialog approach uses template syntax for static modal rendering, while the imperative useDialog API allows dynamic, programmatic creation and destruction of dialogs with finer control over async callbacks.

How do I destroy all active modal dialogs in a Vue 3 application using Naive UI?▼

You can destroy all active modal dialogs by calling the exposed destroyAll API, which clears every currently open dialog instance managed by the DialogProvider context in your Vue 3 application.

Related Skills

Explore More Software Engineering Skills→
jiaiyanjiaiyan
8

naive-ui-i18n

Configure Naive UI internationalization with NConfigProvider and createLocale for Vue 3 apps.

Community
Advanced
vchelaruvchelaru
597

gum-tool-delete-logic

Orchestrate Gum UI deletion workflows with confirmation dialogs and undo locks.

Community
Intermediate
jiaiyanjiaiyan
8

n-discrete

Create discrete Naive UI APIs for use outside Vue component setup.

Community
Basic
BRANDNEWSHVTBRANDNEWSHVT

vue

Build Vue 3 single-file components using the Composition API and script setup.

Official
Advanced