naive-ui

Naive UI Practices Usage guide for Naive UI and Vue 3 applications. Contains 33 rules across 8 categories, prioritized by impact to guide automated refactoring, component creation, and troubleshooting. When to Apply Reference these guidelines when: Writing new Vue 3 components using Naive UI Implementing forms and data validation Handling large datasets with virtual scrolling (DataTable, Tree, Select) Customizing application themes and dark mode Troubleshooting Naive UI usage issues and styling conflicts Rule Categories by Priority Priority Category Impact Prefix 1 Core Configuration CRITICAL core- 2 Form & Data Input CRITICAL component- 3 Complex Data Display HIGH component- 4 Feedback & Overlay HIGH component- 5 Layout & Navigation MEDIUM component- 6 Basic Data Display MEDIUM component- 7 Advanced Customization LOW-MEDIUM core- 8 Ecosystem & Troubleshooting LOW core- Quick Reference 1. Core Configuration (CRITICAL) core-setup - Auto-import setup, global config, providers core-theme - Theme overrides, dark mode, CSS variables, useThemeVars core-import-on-demand - Import on demand and tree shaking core-nuxtjs - Nuxt.js integration best practices core-ssr - Server-Side Rendering guidelines core-style-conflict - Potential style conflict resolution 2. Form & Data Input (CRITICAL) component-form-validation - Validation rules, dynamic forms, array fields component-form - Layout, validation, dynamic fields, nested forms component-input - Formatted input, precision, validation triggers component-select - Filterable, multiple, tags, async search, custom render component-datepicker - Date ranges, shortcuts, formatting, timezone component-upload - Custom request, file handling, drag drop 3. Complex Data Display (HIGH) component-datatable - Virtual scroll, remote data, sorting, filtering, fixed columns component-tree - Async loading, checkable, controlled state, large dataset handling component-virtual-list - Virtual scrolling patterns 4. Feedback & Overlay (HIGH) component-modal - Form modals, draggable, focus management, async close component-feedback - Programmatic API, global methods (Message, Notification) component-feedback-alert - Alert, Skeleton, Spin, LoadingBar, Popconfirm 5. Layout & Navigation (MEDIUM) component-layout - Layout, Grid, Flex, Space, Card, Divider component-menu - Menu, Dropdown, Breadcrumb, Tabs component-navigation-steps - Steps, Timeline, Pagination, Anchor, BackTop 6. Basic Data Display (MEDIUM) component-data-display - Image, List, Descriptions, Calendar, Time, Countdown component-display - Badge, Tag, Avatar, Progress, Statistic, Result, Empty component-button - Button variants, loading, icons component-selection - Radio, Checkbox, Switch, Slider, Rate, ColorPicker 7. Advanced Customization (LOW-MEDIUM) core-customize-theme - Customizing theme extensively core-fonts - Configuring fonts core-i18n - Internationalization core-controlled-uncontrolled - Controlled manner & uncontrolled manner 8. Ecosystem & Troubleshooting (LOW) core-troubleshooting - Common issues and quick fixes core-installation - Installation guidelines core-jsx - JSX & TSX usage core-umd - Using UMD build core-usage-sfc - Usage in SFC core-vite-ssge - Vite SSG/SSE integration core-vitepress - Vitepress integration core-experimental-features - Experimental features How to Use Read individual rule files for detailed explanations and code examples: references/core-setup.md references/component-datatable.md Each rule file contains: Specific implementation details Code examples for Vue 3 setup script Warning notes and prerequisites Relevant TypeScript interfaces Full Compiled Document For the complete guide with all rules expanded: AGENTS.md