家

Skill

ウェブ開発

vue

antfu/skills

TypeScript を使用して Composition API で Vue 3 のシングルファイルコンポーネントを記述し、script setup マクロ、リアクティビティシステム、組み込みコンポーネント、ライフサイクルフックをカバーします。

...すべて拡張します

更新された時間 2026年9月6日

# typescript # vue # composition api # reactivity # script setup # single file components # vue 3

Vue

Vue 3.5 をベースにしています。必ず `` とともに Composition API を使用してください。

設定

JavaScript より TypeScript を優先する
より を優先する
パフォーマンスを重視し、深いリアクティビティが必要ない場合は ref より shallowRef を優先する
Options API より Composition API を常に使用する
Reactive Props Destructure の使用は推奨しない

コア

トピック	説明	参照
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

クイックリファレンス

コンポーネントテンプレート


import { ref, computed, watch, onMounted } from 'vue'

const props = defineProps()

const emit = defineEmits()

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')
})


<template>
  {{ title }} - {{ doubled }}
</template></string>

主要なインポート

// リアクティビティ
import { ref, shallowRef, computed, reactive, readonly, toRef, toRefs, toValue } from 'vue'

// ウォッチャー
import { watch, watchEffect, watchPostEffect, onWatcherCleanup } from 'vue'

// ライフサイクル
import { onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate, onBeforeUnmount } from 'vue'

// ユーティリティ
import { nextTick, defineComponent, defineAsyncComponent } from 'vue'

GitHubで見る

---
name: vue
description: Write Vue 3 Single-File Components using Composition API with TypeScript, covering script setup macros, reactivity system, built-in components, and lifecycle hooks.
---

# Vue

> Based on Vue 3.5. Always use Composition API with `<script setup lang="ts">`.

## Preferences

- Prefer TypeScript over JavaScript
- Prefer `<script setup lang="ts">` over `<script>`
- For performance, prefer `shallowRef` over `ref` if deep reactivity is not needed
- Always use Composition API over Options API
- Discourage using Reactive Props Destructure

## Core

| Topic | Description | Reference |
|-------|-------------|-----------|
| Script Setup & Macros | `<script setup>`, defineProps, defineEmits, defineModel, defineExpose, defineOptions, defineSlots, generics | [script-setup-macros](references/script-setup-macros.md) |
| Reactivity & Lifecycle | ref, shallowRef, computed, watch, watchEffect, effectScope, lifecycle hooks, composables | [core-new-apis](references/core-new-apis.md) |

## Features

| Topic | Description | Reference |
|-------|-------------|-----------|
| Built-in Components & Directives | Transition, Teleport, Suspense, KeepAlive, v-memo, custom directives | [advanced-patterns](references/advanced-patterns.md) |

## Quick Reference

### Component Template

```vue
<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>
```

### Key Imports

```ts
// 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'
```