1---
2name: vue
3description: Vue 3 Composition API, script setup macros, reactivity system, and built-in components. Use when writing Vue SFCs, defineProps/defineEmits/defineModel, watchers, or using Transition/Teleport/Suspense/KeepAlive.
4metadata:
5  author: Anthony Fu
6  version: "2026.1.31"
7  source: Generated from https://github.com/vuejs/docs, scripts at https://github.com/antfu/skills
8---
9 
10# Vue
11 
12> Based on Vue 3.5. Always use Composition API with `<script setup lang="ts">`.
13 
14## Preferences
15 
16- Prefer TypeScript over JavaScript
17- Prefer `<script setup lang="ts">` over `<script>`
18- For performance, prefer `shallowRef` over `ref` if deep reactivity is not needed
19- Always use Composition API over Options API
20- Discourage using Reactive Props Destructure
21 
22## Core
23 
24| Topic | Description | Reference |
25|-------|-------------|-----------|
26| Script Setup & Macros | `<script setup>`, defineProps, defineEmits, defineModel, defineExpose, defineOptions, defineSlots, generics | [script-setup-macros](references/script-setup-macros.md) |
27| Reactivity & Lifecycle | ref, shallowRef, computed, watch, watchEffect, effectScope, lifecycle hooks, composables | [core-new-apis](references/core-new-apis.md) |
28 
29## Features
30 
31| Topic | Description | Reference |
32|-------|-------------|-----------|
33| Built-in Components & Directives | Transition, Teleport, Suspense, KeepAlive, v-memo, custom directives | [advanced-patterns](references/advanced-patterns.md) |
34 
35## Quick Reference
36 
37### Component Template
38 
39```vue
40<script setup lang="ts">
41import { ref, computed, watch, onMounted } from 'vue'
42 
43const props = defineProps<{
44  title: string
45  count?: number
46}>()
47 
48const emit = defineEmits<{
49  update: [value: string]
50}>()
51 
52const model = defineModel<string>()
53 
54const doubled = computed(() => (props.count ?? 0) * 2)
55 
56watch(() => props.title, (newVal) => {
57  console.log('Title changed:', newVal)
58})
59 
60onMounted(() => {
61  console.log('Component mounted')
62})
63</script>
64 
65<template>
66  <div>{{ title }} - {{ doubled }}</div>
67</template>
68```
69 
70### Key Imports
71 
72```ts
73// Reactivity
74import { ref, shallowRef, computed, reactive, readonly, toRef, toRefs, toValue } from 'vue'
75 
76// Watchers
77import { watch, watchEffect, watchPostEffect, onWatcherCleanup } from 'vue'
78 
79// Lifecycle
80import { onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate, onBeforeUnmount } from 'vue'
81 
82// Utilities
83import { nextTick, defineComponent, defineAsyncComponent } from 'vue'
84```
85