vue

Vue 3 開発

Vue 3 Composition API のパターン、コンポーネントアーキテクチャ、テストの手法に関するリファレンスです。

現在の安定版： Vue 3.5 以降。リアクティビティのパフォーマンス向上（メモリ使用量を 56％削減、配列のトラッキングを 10 倍高速化）、新しい SSR 機能、開発者エクスペリエンスの改善が含まれます。

概要

Vue 3 プロジェクト向けの段階的なリファレンスシステムです。コンテキストの使用量を最小限に抑えるため、現在のタスクに関連するファイルのみを読み込みます（基本で約 250 トークン、サブファイルごとに 500～1500 トークン）。

使用する場面

次の作業でこのスキルを使用します：

• .vue コンポーネントの作成
• コンポーザブル（use* 関数）の作成
• クライアントサイドユーティリティの構築
• Vue コンポーネント／コンポーザブルのテスト

次の作業には、代わりに nuxt スキルを使用します：

• サーバールート、API エンドポイント
• ファイルベースルーティング、ミドルウェア
• Nuxt 固有のパターン

スタイル付き UI コンポーネントには： nuxt-ui スキルを使用します ヘッドレスでアクセシブルなコンポーネントには： reka-ui スキルを使用します VueUse コンポーザブルには： vueuse スキルを使用します

クイックリファレンス

作業内容...	読み込むファイル
components/ 内の .vue	references/components.md
composables/ 内のファイル	references/composables.md
utils/ 内のファイル	references/utils-client.md
.spec.ts または .test.ts	references/testing.md
TypeScript のパターン	references/typescript.md
Vue Router の型付け	references/router.md

ファイルの読み込み

ファイルのコンテキストに基づき、一度に 1 つのファイルを読み込みます：

• コンポーネントの作業 → references/components.md
• コンポーザブルの作業 → references/composables.md
• ユーティリティの作業 → references/utils-client.md
• テスト → references/testing.md
• TypeScript → references/typescript.md
• Vue Router → references/router.md

すべてのファイルを一度に読み込まないでください - 関連しないパターンにコンテキストを浪費します。

利用可能なガイダンス

references/components.md - リアクティブな分割代入を使った props、emit のパターン、v-model 用の defineModel、スロットの省略記法

references/composables.md - Composition API の構成、VueUse との統合、ライフサイクルフック、非同期パターン、リアクティビティに関する注意点

references/utils-client.md - 純粋関数、フォーマッター、バリデーター、変換関数、ユーティリティを使用しない場面

references/testing.md - Vitest + @vue/test-utils、コンポーネントのテスト、コンポーザブルのテスト、ルーターのモック

references/typescript.md - provide/inject 用の InjectionKey、vue-tsc の厳格なテンプレート、tsconfig の設定、ジェネリックコンポーネント

references/router.md - ルートメタの型、unplugin-vue-router を使った型付きパラメーター、スクロール動作、ナビゲーションガード

例

resources/examples/ に実用的な例があります：

• component-example.vue - すべてのパターンを含む完全なコンポーネント
• composable-example.ts - 再利用可能なコンポジション関数