mcpField
V
vue

vue

github.com/hairyf開発26120 回インストール4 週間前に更新
リポジトリ

vue について

Vue 3.5 をベースに、Composition API、TypeScript、リアクティビティ、ライフサイクル、組み込み機能を案内するスキルです。Vue コンポーネントやアプリケーションを開発する人向けです。

主な機能

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

活用シーン

  1. 01script setup を使った Vue コンポーネントの実装
  2. 02アプリケーション状態に使うリアクティビティ API の選択

インストール

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

$npx skills add https://github.com/hairyf/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 に基づいています。常に <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 対応