n-alert

Name: n-alert
Availability: InStock
Author: jiaiyan

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

8|3|Updated Mar 13, 2026

Search Tags:#vue #notifications #ui-component #alert #naive-ui #form-feedback

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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.