mcpField
V
vue

vue

github.com/midudev開発7.0k57 回インストール2 週間前に更新
リポジトリ

vue について

Vue 3.5 の指針に基づく Vue 開発スキルです。Vue アプリケーションの開発者向けに、Composition API、TypeScript、リアクティビティ、ライフサイクル、組み込みコンポーネントを扱います。

主な機能

  1. 01Composition API の指針
  2. 02TypeScript の優先
  3. 03リアクティビティとライフサイクルの参照
  4. 04組み込みコンポーネントとディレクティブ

活用シーン

  1. 01Vue コンポーネントの構成
  2. 02リアクティビティ API の選択
  3. 03ライフサイクルフックの利用
  4. 04組み込みコンポーネントとディレクティブの利用

インストール

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

$npx skills add https://github.com/midudev/autoskills --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 対応