{"id":"ebcc5aed-2ec2-4630-af38-462b460096a2","shortId":"BtmgKx","kind":"skill","title":"vue","tagline":"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.","description":"# Vue\n\n> Based on Vue 3.5. Always use Composition API with `<script setup lang=\"ts\">`.\n\n## Preferences\n\n- Prefer TypeScript over JavaScript\n- Prefer `<script setup lang=\"ts\">` over `<script>`\n- For performance, prefer `shallowRef` over `ref` if deep reactivity is not needed\n- Always use Composition API over Options API\n- Discourage using Reactive Props Destructure\n\n## Core\n\n| Topic | Description | Reference |\n|-------|-------------|-----------|\n| Script Setup & Macros | `<script setup>`, defineProps, defineEmits, defineModel, defineExpose, defineOptions, defineSlots, generics | [script-setup-macros](references/script-setup-macros.md) |\n| Reactivity & Lifecycle | ref, shallowRef, computed, watch, watchEffect, effectScope, lifecycle hooks, composables | [core-new-apis](references/core-new-apis.md) |\n\n## Features\n\n| Topic | Description | Reference |\n|-------|-------------|-----------|\n| Built-in Components & Directives | Transition, Teleport, Suspense, KeepAlive, v-memo, custom directives | [advanced-patterns](references/advanced-patterns.md) |\n\n## Quick Reference\n\n### Component Template\n\n```vue\n<script setup lang=\"ts\">\nimport { ref, computed, watch, onMounted } from 'vue'\n\nconst props = defineProps<{\n  title: string\n  count?: number\n}>()\n\nconst emit = defineEmits<{\n  update: [value: string]\n}>()\n\nconst model = defineModel<string>()\n\nconst doubled = computed(() => (props.count ?? 0) * 2)\n\nwatch(() => props.title, (newVal) => {\n  console.log('Title changed:', newVal)\n})\n\nonMounted(() => {\n  console.log('Component mounted')\n})\n</script>\n\n<template>\n  <div>{{ title }} - {{ doubled }}</div>\n</template>\n```\n\n### Key Imports\n\n```ts\n// Reactivity\nimport { ref, shallowRef, computed, reactive, readonly, toRef, toRefs, toValue } from 'vue'\n\n// Watchers\nimport { watch, watchEffect, watchPostEffect, onWatcherCleanup } from 'vue'\n\n// Lifecycle\nimport { onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate, onBeforeUnmount } from 'vue'\n\n// Utilities\nimport { nextTick, defineComponent, defineAsyncComponent } from 'vue'\n```","tags":["vue","skills","antfu","agent-skills"],"capabilities":["skill","source-antfu","skill-vue","topic-agent-skills","topic-skills"],"categories":["skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/antfu/skills/vue","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add antfu/skills","source_repo":"https://github.com/antfu/skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 4987 github stars · SKILL.md body (2,051 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T18:52:46.400Z","embedding":null,"createdAt":"2026-04-18T20:24:18.059Z","updatedAt":"2026-05-18T18:52:46.400Z","lastSeenAt":"2026-05-18T18:52:46.400Z","tsv":"'3':3 '3.5':30 'alway':31 'api':5,34 'base':27 'built':13 'built-in':12 'compon':15 'composit':4,33 'comput':45 'defineasynccompon':75 'definecompon':74 'defineprops/defineemits/definemodel':21 'doubl':37 'import':39,42,54,62,72 'key':38 'lifecycl':61 'macro':8 'nexttick':73 'onbeforemount':66 'onbeforeunmount':68 'onbeforeupd':67 'onmount':63 'onunmount':65 'onupd':64 'onwatchercleanup':58 'reactiv':9,41,46 'readon':47 'ref':43 'script':6 'setup':7 'sfcs':20 'shallowref':44 'skill' 'skill-vue' 'source-antfu' 'system':10 'titl':36 'topic-agent-skills' 'topic-skills' 'toref':48,49 'tovalu':50 'transition/teleport/suspense/keepalive':25 'ts':40 'use':16,24,32 'util':71 'vue':1,2,19,26,29,52,60,70,77 'watch':55 'watcheffect':56 'watcher':22,53 'watchposteffect':57 'write':18","prices":[{"id":"0f8e98a0-111f-4259-8ead-0c52c8d583e3","listingId":"ebcc5aed-2ec2-4630-af38-462b460096a2","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"antfu","category":"skills","install_from":"skills.sh"},"createdAt":"2026-04-18T20:24:18.059Z"}],"sources":[{"listingId":"ebcc5aed-2ec2-4630-af38-462b460096a2","source":"github","sourceId":"antfu/skills/vue","sourceUrl":"https://github.com/antfu/skills/tree/main/skills/vue","isPrimary":false,"firstSeenAt":"2026-04-18T21:53:55.846Z","lastSeenAt":"2026-05-18T18:52:46.400Z"},{"listingId":"ebcc5aed-2ec2-4630-af38-462b460096a2","source":"skills_sh","sourceId":"antfu/skills/vue","sourceUrl":"https://skills.sh/antfu/skills/vue","isPrimary":true,"firstSeenAt":"2026-04-18T20:24:18.059Z","lastSeenAt":"2026-05-07T22:40:14.417Z"}],"details":{"listingId":"ebcc5aed-2ec2-4630-af38-462b460096a2","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"antfu","slug":"vue","github":{"repo":"antfu/skills","stars":4987,"topics":["agent-skills","skills"],"license":"mit","html_url":"https://github.com/antfu/skills","pushed_at":"2026-05-01T16:46:24Z","description":"Anthony Fu's curated collection of agent skills.","skill_md_sha":"32008d10ca7c6b78d696b0b4fb3be9d787652694","skill_md_path":"skills/vue/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/antfu/skills/tree/main/skills/vue"},"layout":"multi","source":"github","category":"skills","frontmatter":{"name":"vue","description":"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."},"skills_sh_url":"https://skills.sh/antfu/skills/vue"},"updatedAt":"2026-05-18T18:52:46.400Z"}}