Follow Vue 3 best practices using Composition API, script setup, and modern reactivity patterns.
Install
mkdir -p .claude/skills/vue-elonehoo && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/14291" && unzip -o skill.zip -d .claude/skills/vue-elonehoo && rm skill.zipInstalls to .claude/skills/vue-elonehoo
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
- →Write Vue SFCs using Composition API
- →Define props with `defineProps`
- →Define emits with `defineEmits`
- →Define models with `defineModel`
- →Implement watchers for reactivity
- →Use built-in components like Transition, Teleport, Suspense, KeepAlive
How it works
This skill guides the creation of Vue 3 components using the Composition API and script setup macros, emphasizing TypeScript and specific reactivity patterns.
Inputs & outputs
When to use vue
- →Write Vue SFCs
- →Define props and emits
- →Implement watchers
- →Use Teleport/Suspense
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 { computed, onMounted, ref, watch } 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 { computed, reactive, readonly, ref, shallowRef, toRef, toRefs, toValue } from 'vue'
// Watchers
import { onWatcherCleanup, watch, watchEffect, watchPostEffect } from 'vue'
// Lifecycle
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated } from 'vue'
// Utilities
import { defineAsyncComponent, defineComponent, nextTick } from 'vue'
When not to use it
- →When using Options API
- →When deep reactivity is not needed and `shallowRef` is not preferred
- →When using Reactive Props Destructure
Limitations
- →Based on Vue 3.5
- →Prefers TypeScript over JavaScript
How it compares
This skill enforces modern Vue 3 Composition API patterns with script setup, providing a structured approach over traditional Options API or unguided development.
Compared to similar skills
vue side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| vue (this skill) | 0 | 5mo | 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.
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
antfu
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.
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.