{"id":"ebcc5aed-2ec2-4630-af38-462b460096a2","shortId":"BtmgKx","kind":"skill","title":"Vue","tagline":"Skills skill by Antfu","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"],"capabilities":["skill","source-antfu","category-skills"],"categories":["skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/antfu/skills/vue","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"install_from":"skills.sh"}},"qualityScore":"0.300","qualityRationale":"deterministic score 0.30 from registry signals: · indexed on skills.sh · published under antfu/skills","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:v1","enrichmentVersion":1,"enrichedAt":"2026-04-24T01:40:05.489Z","embedding":null,"createdAt":"2026-04-18T20:24:18.059Z","updatedAt":"2026-04-24T01:40:05.489Z","lastSeenAt":"2026-04-24T01:40:05.489Z","tsv":"'3.5':10 'alway':11 'antfu':5 'api':14 'base':7 'category-skills' 'composit':13 'comput':25 'defineasynccompon':55 'definecompon':54 'doubl':17 'import':19,22,34,42,52 'key':18 'lifecycl':41 'nexttick':53 'onbeforemount':46 'onbeforeunmount':48 'onbeforeupd':47 'onmount':43 'onunmount':45 'onupd':44 'onwatchercleanup':38 'reactiv':21,26 'readon':27 'ref':23 'shallowref':24 'skill':2,3 'source-antfu' 'titl':16 'toref':28,29 'tovalu':30 'ts':20 'use':12 'util':51 'vue':1,6,9,32,40,50,57 'watch':35 'watcheffect':36 'watcher':33 'watchposteffect':37","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-04-24T00:52:47.102Z"},{"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-04-24T01:40:05.489Z"}],"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","source":"skills_sh","category":"skills","skills_sh_url":"https://skills.sh/antfu/skills/vue"},"updatedAt":"2026-04-24T01:40:05.489Z"}}