This tool supports Vue development by enforcing Composition API practices and simplifying the use of macros and reactivity primitives.
Install
mkdir -p .claude/skills/vue && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/1940" && unzip -o skill.zip -d .claude/skills/vue && rm skill.zipInstalls to .claude/skills/vue
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
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.Key capabilities
- →Utilize Vue 3 Composition API and script setup
- →Implement reactivity with ref, shallowRef, and computed
- →Manage component props, emits, and models
- →Configure built-in components like Transition and Teleport
- →Handle lifecycle hooks and watchers
How it works
The skill provides a set of best practices and patterns for Vue 3 development, emphasizing the use of `<script setup lang="ts">` and Composition API macros for component definition and reactivity.
Inputs & outputs
When to use vue
- →Create a new Vue SFC
- →Refactor Options API to Composition API
- →Implement complex watchers and lifecycle hooks
- →Configure teleports and suspense components
About this skill
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
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'
When not to use it
- →When using Options API for legacy codebases
- →When deep reactivity is required for large objects
Prerequisites
Limitations
- →Discourages Reactive Props Destructure
- →Requires TypeScript for full feature support
How it compares
It enforces modern Vue 3 standards and performance-oriented reactivity choices over legacy Options API patterns.
Compared to similar skills
vue side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| vue (this skill) | 10 | 6mo | No flags | Intermediate |
| screenshot-to-code | 204 | 2mo | No flags | Beginner |
| vue-best-practices | 19 | 5mo | No flags | Intermediate |
| web-component-design | 5 | 5mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by antfu
View all by antfu →You might also like
screenshot-to-code
OneWave-AI
Convert UI screenshots into working HTML/CSS/React/Vue code. Detects design patterns, components, and generates responsive layouts. Use this when users provide screenshots of websites, apps, or UI designs and want code implementation.
vue-best-practices
antfu
MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API.
web-component-design
wshobson
Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems.
vue-testing-best-practices
vuejs-ai
Use for Vue.js testing. Covers Vitest, Vue Test Utils, component testing, mocking, testing patterns, and Playwright for E2E testing.
vue-debug-guides
vuejs-ai
Vue 3 debugging and error handling for runtime errors, warnings, async failures, and SSR/hydration issues. Use when diagnosing or fixing Vue issues.
ui
nuxt
Build UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, building forms, or composing layouts like dashboards, docs sites, and chat interfaces.