naive-ui

Naive UI のベストプラクティス

Naive UI と Vue 3 アプリケーションの使用ガイドです。影響度に基づいて優先順位付けされた 8 つのカテゴリにわたる 33 個のルールを収録しており、自動リファクタリング、コンポーネントの作成、トラブルシューティングに役立ちます。

適用する場面

次の場合に、これらのガイドラインを参照してください。

• Naive UI を使用する新しい Vue 3 コンポーネントを作成する
• フォームとデータ検証を実装する
• 仮想スクロールを使用して大規模なデータセットを扱う（DataTable、Tree、Select）
• アプリケーションのテーマとダークモードをカスタマイズする
• Naive UI の使用上の問題やスタイルの競合をトラブルシューティングする

優先度別のルールカテゴリ

優先度	カテゴリ	影響度	プレフィックス
1	コア設定	重大	core-
2	フォームとデータ入力	重大	component-
3	複雑なデータ表示	高	component-
4	フィードバックとオーバーレイ	高	component-
5	レイアウトとナビゲーション	中	component-
6	基本的なデータ表示	中	component-
7	高度なカスタマイズ	低〜中	core-
8	エコシステムとトラブルシューティング	低	core-

クイックリファレンス

1. コア設定（重大）

• core-setup - 自動インポートの設定、グローバル設定、プロバイダー
• core-theme - テーマのオーバーライド、ダークモード、CSS 変数、useThemeVars
• core-import-on-demand - 必要に応じたインポートとツリーシェイキング
• core-nuxtjs - Nuxt.js 統合のベストプラクティス
• core-ssr - サーバーサイドレンダリングのガイドライン
• core-style-conflict - スタイルの競合を解決する方法

2. フォームとデータ入力（重大）

• component-form-validation - 検証ルール、動的フォーム、配列フィールド
• component-form - レイアウト、検証、動的フィールド、ネストされたフォーム
• component-input - 書式設定された入力、精度、検証のトリガー
• component-select - フィルタリング可能、複数選択、タグ、非同期検索、カスタムレンダリング
• component-datepicker - 日付範囲、ショートカット、書式設定、タイムゾーン
• component-upload - カスタムリクエスト、ファイル処理、ドラッグ＆ドロップ

3. 複雑なデータ表示（高）

• component-datatable - 仮想スクロール、リモートデータ、並べ替え、フィルタリング、固定列
• component-tree - 非同期読み込み、チェック可能、制御状態、大規模データセットの処理
• component-virtual-list - 仮想スクロールのパターン

4. フィードバックとオーバーレイ（高）

• component-modal - フォームモーダル、ドラッグ可能、フォーカス管理、非同期クローズ
• component-feedback - プログラムから利用する API、グローバルメソッド（Message、Notification）
• component-feedback-alert - Alert、Skeleton、Spin、LoadingBar、Popconfirm

5. レイアウトとナビゲーション（中）

• component-layout - Layout、Grid、Flex、Space、Card、Divider
• component-menu - Menu、Dropdown、Breadcrumb、Tabs
• component-navigation-steps - Steps、Timeline、Pagination、Anchor、BackTop

6. 基本的なデータ表示（中）

• component-data-display - Image、List、Descriptions、Calendar、Time、Countdown
• component-display - Badge、Tag、Avatar、Progress、Statistic、Result、Empty
• component-button - Button のバリエーション、読み込み中、アイコン
• component-selection - Radio、Checkbox、Switch、Slider、Rate、ColorPicker

7. 高度なカスタマイズ（低〜中）

• core-customize-theme - テーマの詳細なカスタマイズ
• core-fonts - フォントの設定
• core-i18n - 国際化
• core-controlled-uncontrolled - 制御方式と非制御方式

8. エコシステムとトラブルシューティング（低）

• core-troubleshooting - よくある問題と簡単な修正方法
• core-installation - インストールのガイドライン
• core-jsx - JSX と TSX の使用方法
• core-umd - UMD ビルドの使用方法
• core-usage-sfc - SFC での使用方法
• core-vite-ssge - Vite SSG/SSE の統合
• core-vitepress - Vitepress の統合
• core-experimental-features - 実験的機能

使用方法

詳しい説明とコード例については、個々のルールファイルをお読みください。

references/core-setup.md
references/component-datatable.md

各ルールファイルには、次の内容が含まれています。

• 具体的な実装の詳細
• Vue 3 の setup script 用コード例
• 警告と前提条件
• 関連する TypeScript インターフェース

コンパイル済みドキュメント全体

すべてのルールを展開した完全なガイドについては、AGENTS.md をご覧ください。