mcpField
V
vue

vue

github.com/antfu開発6.0k36.0k 回インストール6 日前に更新
リポジトリ

vue について

Vue はユーザーインターフェース構築用のフレームワークで、このスキルは Vue 3.5 に基づく開発資料を提供します。Composition API、リアクティビティ、ライフサイクル、組み込みコンポーネントを扱います。

主な機能

  1. 01Composition API とマクロ
  2. 02リアクティブ状態と算出値
  3. 03ウォッチャーとライフサイクルフック
  4. 04組み込みコンポーネントとディレクティブ
  5. 05TypeScript 開発の指針

活用シーン

  1. 01Vue の単一ファイルコンポーネント作成
  2. 02コンポーネント状態とリアクティブ更新の管理
  3. 03ライフサイクルフックを使った処理

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/antfu/skills --skill vue

インストール後、Claude Code で/vueを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

GENERATION.md
references/
advanced-patterns.md
core-new-apis.md
script-setup-macros.md

詳細

Vue

Vue 3.5 に基づき、2026-09-25 に生成されました。常に <script setup lang="ts"> を使用した Composition API を使ってください。

設定

  • JavaScript より TypeScript を優先してください
  • <script> より <script setup lang="ts"> を優先してください
  • パフォーマンスを考慮し、深いリアクティビティが不要な場合は ref より shallowRef を優先してください
  • 常に Options API より Composition API を使用してください
  • Reactive Props Destructure の使用は推奨しません

コア

トピック説明リファレンス
Script Setup とマクロ<script setup>、defineProps、defineEmits、defineModel、defineExpose、defineOptions、defineSlots、ジェネリクスscript-setup-macros
リアクティビティとライフサイクルref、shallowRef、computed、watch、watchEffect、effectScope、ライフサイクルフック、コンポーザブルcore-new-apis

機能

トピック説明リファレンス
組み込みコンポーネントとディレクティブTransition、Teleport、Suspense、KeepAlive、v-memo、カスタムディレクティブadvanced-patterns

クイックリファレンス

コンポーネントテンプレート
<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'

const props = defineProps<{
  title: string
  count?: number
}>()

const emit = defineEmits<{
  update: [value: string]
}>()

const model = defineModel<string>()

const doubled = computed(() => (props.count ?? 0) * 2)

watch(() => props.title, (newVal) => {
  console.log('Title changed:', newVal)
})

onMounted(() => {
  console.log('Component mounted')
})
</script>

<template>
  <div>{{ title }} - {{ doubled }}</div>
</template>
主なインポート
// Reactivity
import { ref, shallowRef, computed, reactive, readonly, toRef, toRefs, toValue } from 'vue'

// Watchers
import { watch, watchEffect, watchPostEffect, onWatcherCleanup } from 'vue'

// Lifecycle
import { onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate, onBeforeUnmount } from 'vue'

// Utilities
import { nextTick, defineComponent, defineAsyncComponent } from 'vue'

コメント

Markdown 対応