n-alert

Display contextual alert messages with lifecycle management for Naive UI in Vue 3.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a standardized way to display contextual alert messages (info, success, warning, and error) and manage their lifecycle in Naive UI applications, ensuring consistent user feedback across components.

Core Features & Use Cases

  • Multiple Types: default, info, success, warning, error
  • Closable: Optional close button with callback support
  • Custom Icons: Support for custom icon slots
  • Border Control: Toggle border visibility
  • Header Slot: Custom header content support
  • Marquee Integration: Works with n-marquee for scrolling content

Quick Start

Create a dismissible success alert in a Vue template to notify users of a completed action.

Frequently Asked Questions about n-alert

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

FAQPage Schema
How do I display contextual alert messages in a Vue 3 Naive UI application?

You can display alert messages in Naive UI using this component to manage info, success, warning, and error notifications. It provides standardized user feedback for Vue 3 dashboards and forms without requiring external dependencies.

Can I create a closable alert with custom icons in Naive UI?

Yes, Naive UI alerts support an optional close button with callback functionality and custom icon slots. You can configure these features alongside header content and border visibility toggling for tailored notification areas.

Does Naive UI alert support scrolling text for long notifications?

Naive UI alerts support marquee integration, allowing you to apply scrolling text effects for long notification content. This ensures readability within constrained dashboard layouts or form feedback areas.

What are the available type variants for Naive UI form feedback alerts?

Naive UI form feedback alerts offer five type variants: default, info, success, warning, and error. These variants standardize contextual messaging and manage the alert lifecycle across components.

Do I need additional dependencies to use Naive UI alerts in Vue 3?

No additional dependencies are required to use Naive UI alerts in Vue 3. The component operates independently to manage alert lifecycles, custom headers, and border toggling within your existing Naive UI project.