mcpField
V
vue

vue

github.com/onmax開発7238.0k 回インストール1 日前に更新
リポジトリ

vue について

Vue 3 開発向けのリファレンススキルです。Composition API、リアクティビティ、コンポーネントのパターンをまとめ、記載された方針に沿うコード作成を支援します。

主な機能

  1. 01Vue 3.5 開発ガイダンス
  2. 02Composition API とライフサイクル
  3. 03リアクティビティ API リファレンス
  4. 04組み込みコンポーネントとディレクティブのパターン

活用シーン

  1. 01Vue 単一ファイルコンポーネントの作成
  2. 02リアクティビティ API の選択
  3. 03コンポーネントのライフサイクル実装

インストール

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

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

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

同梱ファイル

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

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

詳細

Vue

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

設定

  • 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、genericsscript-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 対応