Vue
SkillAI & modelsYour AI can write Vue 3 components using the Composition API and script setup once this skill is added. It works from a reference covering Vue's reactivity system, script setup macros like defineProps and defineEmits, and built-in components such as Transition and Teleport. Reach for it when you need new components, watchers, or single-file components written the way Vue expects.
Available today. Use it from your connected AI after setup.
No other account needed.
After adding it, ask your AI to write a new Vue component or add props, events, or watchers to one you already have. It will follow the Composition API and script setup patterns from the reference.
Then ask your AI: use the Vue skill
What your AI can do with it
- Write Vue 3 single-file components with script setup
- Define props, events, and two-way bindings using defineProps, defineEmits, and defineModel
- Manage reactive state with Vue's reactivity system
- Add watchers that respond to changes in your data
- Use built-in components like Transition, Teleport, Suspense, and KeepAlive
What this skill tells your AI
The instructions your AI receives, as published by antfu/skills in skills/vue/SKILL.md and read by ahel’s review.
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
shallowRefoverrefif 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 |
| Reactivity & Lifecycle | ref, shallowRef, computed, watch, watchEffect, effectScope, lifecycle hooks, composables | core-new-apis |
Features
| Topic | Description | Reference |
|---|---|---|
| Built-in Components & Directives | Transition, Teleport, Suspense, KeepAlive, v-memo, custom directives | advanced-patterns |
Quick Reference
Component Template
<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
// 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'
Signals
- GitHub stars
- 6k
- Forks
- 331
- Last commit
- Jun 2026
Advanced
- Catalog kind
- skill
- Gateway key
vue- Source
- github.com/antfu/skills