skills.rest
ZHLX2005
ZHLX2005COMMUNITY
Explore all skills by this author →
GitHub

naive-ui-reference

Provides Naive UI component usage, theming, and form guidance for Vue 3 TypeScript projects.

3|1|Updated Apr 14, 2026
Search Tags:#typescript#theming#frontend#component library#form validation#vue 3#naive-ui
One-click install
npx skills add https://github.com/ZHLX2005/sl --skill naive-ui-reference-zhlx2005
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: naive-ui-reference
Source: https://github.com/ZHLX2005/sl/tree/main/skills/ui-component-library/references/naive-ui
Command: npx skills add https://github.com/ZHLX2005/sl --skill naive-ui-reference-zhlx2005

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires naive-ui, and includes references (resource) components.

What problem does it solve? Developers building Vue 3 + TypeScript applications with Naive UI often need quick, accurate answers about component APIs, theme customization, provider setup, and common integration pitfalls without digging through the full official documentation. ## Core Features & Use Cases - Component Usage Patterns: Ready-to-use examples for NButton, NDataTable, NForm, NSelect, NDatePicker, NUpload, and other Naive UI components with TypeScript typing. - Theme & Internationalization: Guidance on dark mode via darkTheme, themeOverrides for brand colors, and locale configuration with zhCN/enUS. - Troubleshooting: Answers to common issues like useMessage context errors, tree-shaking setup, and form validation with FormRules. - Use Case: When building a Vue 3 admin dashboard, ask how to implement a validated form with NForm and NInput, and receive a complete typed code example with rules and submit handling. ## Quick Start Ask how to use a specific Naive UI component or configure theming in your Vue 3 TypeScript project.

Frequently Asked Questions about naive-ui-reference

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

FAQPage Schema
How do I use Naive UI components in a Vue 3 project?▼

Install naive-ui via npm, then either register it globally with app.use(naive) or import components individually like NButton and NDataTable. Naive UI is tree-shaking friendly, so on-demand imports are the recommended approach.

How to enable dark mode in Naive UI?▼

Import darkTheme from naive-ui and pass it to NConfigProvider via the :theme prop. You can combine it with themeOverrides to customize primary colors and component-level tokens for your brand.

Why does useMessage throw a context error in Naive UI?▼

useMessage, useDialog, and useNotification must be called inside a component tree wrapped by NMessageProvider, NDialogProvider, or NNotificationProvider. Place these providers inside NConfigProvider at the app root.

Does Naive UI support TypeScript type inference?▼

Yes, Naive UI is TypeScript-first and exports types like ButtonProps, DataTableColumns, FormInst, and FormRules. It requires Vue 3.4+ and TypeScript 4.5+ for full type inference on component props.

When should I not use Naive UI for a Vue project?▼

Naive UI does not support React or Vue 2 projects. For simple Vue 3 projects that do not need TypeScript, Element Plus may be a more suitable alternative.

Related Skills

Explore More Software Engineering Skills→
jiaiyanjiaiyan
8

naive-ui-quickstart

Configure Naive UI installation and usage in Vue 3 projects.

Community
Basic
jiaiyanjiaiyan
8

n-anchor

Implement in-page anchor navigation and dynamic tables of contents with Vue and Naive UI.

Community
Intermediate
VSF-QC-TTSVSF-QC-TTS

typescript-tooling

Automate ESLint, Prettier, Jest, and Vitest setup for TypeScript projects.

Official
Advanced
partme-aipartme-ai
610

ant-design-vue

Guide Ant Design Vue component usage for Vue 3 projects.

Official
Intermediate