Vue 3 開発

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

現在の安定版: Vue 3.5+ で強化されたリアクティビティパフォーマンス (メモリ使用量 56% 削減、配列追跡 10 倍高速化)、新しい SSR 機能、および改善された開発体験を備えています。

概要

Vue 3 プロジェクト用の段階的リファレンスシステムです。現在のタスクに関連するファイルのみを読み込んで、コンテキスト使用量を最小化します (基本 ~250 トークン、サブファイルあたり 500-1500 トークン)。

使用時機

このスキルを使用する場合:

• .vue コンポーネントの作成
• composables (use* 関数) の作成
• クライアント側ユーティリティの構築
• Vue コンポーネント/composables のテスト

代わりに nuxt スキルを使用する場合:

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

スタイル付き UI コンポーネントの場合: nuxt-ui スキルを使用 アクセシブルなヘッドレスコンポーネントの場合: reka-ui スキルを使用 VueUse composables の場合: 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
リアクティビティ (ref, watch)	references/reactivity.md
カスタムディレクティブ	references/directives.md
Provide/inject	references/provide-inject.md
エッジケース、vue-tsc	references/gotchas.md

ファイルの読み込み

タスクに基づいて、これらのリファレンスファイルの読み込みを検討してください:

• references/components.md - components/ ディレクトリで作業するか、.vue ファイルを作成する場合
• references/composables.md - composables (use* 関数) を作成する場合
• references/utils-client.md - utils/ で作業するか、クライアント側ユーティリティを作成する場合
• references/testing.md - .spec.ts または .test.ts ファイルを作成する場合
• references/typescript.md - Vue TypeScript パターンまたはジェネリクスを扱う場合
• references/router.md - Vue Router を操作するか、ルート型付けを行う場合
• references/reactivity.md - ref, reactive, computed, watch, または watchEffect を使用する場合
• references/directives.md - カスタムディレクティブを作成または使用する場合
• references/provide-inject.md - provide/inject パターンを使用する場合
• references/gotchas.md - エッジケースやハイドレーション問題をデバッグする場合

一度にすべてのファイルを読み込まないでください。 現在のタスクに関連するもののみ読み込んでください。

クイックスタート

<script setup lang="ts">
const { count = 0 } = defineProps<{ count?: number }>()
const emit = defineEmits<{ update: [value: number] }>()
</script>

<template>
  <button @click="emit('update', count + 1)">
    Count: {{ count }}
  </button>
</template>

利用可能なガイダンス

references/components.md - リアクティブデストラクチャリングを伴う Props、emits パターン、v-model 用の defineModel、スロットの短記法

references/composables.md - Composition API の構造、VueUse 統合、ライフサイクルフック、非同期パターン、リアクティビティの落とし穴

references/utils-client.md - 純粋関数、フォーマッタ、バリデータ、トランスフォーマ、ユーティリティを使用してはいけない場合

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

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

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

references/reactivity.md - ref、reactive、computed、watch、watchEffect、リアクティビティの基礎

references/directives.md - カスタムディレクティブフック、v-focus、v-click-outside、v-tooltip パターン

references/provide-inject.md - InjectionKey 型付け、アプリレベルの provide、readonly パターン

references/gotchas.md - 一般的な落とし穴、vue-tsc エッジケース、ハイドレーション問題、競合状態 (vuejs-ai/skills より)