1---
2name: vue
3description: Use when editing .vue files, creating Vue 3 components, writing composables, or testing Vue code - provides Composition API patterns, props/emits best practices, VueUse integration, and reactive destructuring guidance
4license: MIT
5---
6 
7# Vue 3 Development
8 
9Reference for Vue 3 Composition API patterns, component architecture, and testing practices.
10 
11**Current stable:** Vue 3.5+ with enhanced reactivity performance (-56% memory, 10x faster array tracking), new SSR features, and improved developer experience.
12 
13## Overview
14 
15Progressive reference system for Vue 3 projects. Load only files relevant to current task to minimize context usage (~250 tokens base, 500-1500 per sub-file).
16 
17## When to Use
18 
19**Use this skill when:**
20 
21- Writing `.vue` components
22- Creating composables (`use*` functions)
23- Building client-side utilities
24- Testing Vue components/composables
25 
26**Use `nuxt` skill instead for:**
27 
28- Server routes, API endpoints
29- File-based routing, middleware
30- Nuxt-specific patterns
31 
32**For styled UI components:** use `nuxt-ui` skill
33**For headless accessible components:** use `reka-ui` skill
34**For VueUse composables:** use `vueuse` skill
35 
36## Quick Reference
37 
38| Working on...            | Load file                    |
39| ------------------------ | ---------------------------- |
40| `.vue` in `components/`  | references/components.md     |
41| File in `composables/`   | references/composables.md    |
42| File in `utils/`         | references/utils-client.md   |
43| `.spec.ts` or `.test.ts` | references/testing.md        |
44| TypeScript patterns      | references/typescript.md     |
45| Vue Router typing        | references/router.md         |
46| Reactivity (ref, watch)  | references/reactivity.md     |
47| Custom directives        | references/directives.md     |
48| Provide/inject           | references/provide-inject.md |
49| Edge cases, vue-tsc      | references/gotchas.md        |
50 
51## Loading Files
52 
53**Consider loading these reference files based on your task:**
54 
55- [ ] [references/components.md](references/components.md) - if working in `components/` or writing `.vue` files
56- [ ] [references/composables.md](references/composables.md) - if creating composables (`use*` functions)
57- [ ] [references/utils-client.md](references/utils-client.md) - if working in `utils/` or writing client utilities
58- [ ] [references/testing.md](references/testing.md) - if writing `.spec.ts` or `.test.ts` files
59- [ ] [references/typescript.md](references/typescript.md) - if working with Vue TypeScript patterns or generics
60- [ ] [references/router.md](references/router.md) - if working with Vue Router or route typing
61- [ ] [references/reactivity.md](references/reactivity.md) - if using ref, reactive, computed, watch, or watchEffect
62- [ ] [references/directives.md](references/directives.md) - if creating or using custom directives
63- [ ] [references/provide-inject.md](references/provide-inject.md) - if using provide/inject patterns
64- [ ] [references/gotchas.md](references/gotchas.md) - if debugging edge cases or hydration issues
65 
66**DO NOT load all files at once.** Load only what's relevant to your current task.
67 
68## Quick Start
69 
70```vue
71<script setup lang="ts">
72const { count = 0 } = defineProps<{ count?: number }>()
73const emit = defineEmits<{ update: [value: number] }>()
74</script>
75 
76<template>
77  <button @click="emit('update', count + 1)">
78    Count: {{ count }}
79  </button>
80</template>
81```
82 
83## Available Guidance
84 
85**[references/components.md](references/components.md)** - Props with reactive destructuring, emits patterns, defineModel for v-model, slots shorthand
86 
87**[references/composables.md](references/composables.md)** - Composition API structure, VueUse integration, lifecycle hooks, async patterns, reactivity gotchas
88 
89**[references/utils-client.md](references/utils-client.md)** - Pure functions, formatters, validators, transformers, when NOT to use utils
90 
91**[references/testing.md](references/testing.md)** - Vitest + @vue/test-utils, component testing, composable testing, router mocking
92 
93**[references/typescript.md](references/typescript.md)** - InjectionKey for provide/inject, vue-tsc strict templates, tsconfig settings, generic components
94 
95**[references/router.md](references/router.md)** - Route meta types, typed params with unplugin-vue-router, scroll behavior, navigation guards
96 
97**[references/reactivity.md](references/reactivity.md)** - ref, reactive, computed, watch, watchEffect, reactivity fundamentals
98 
99**[references/directives.md](references/directives.md)** - Custom directive hooks, v-focus, v-click-outside, v-tooltip patterns
100 
101**[references/provide-inject.md](references/provide-inject.md)** - InjectionKey typing, app-level provide, readonly patterns
102 
103**[references/gotchas.md](references/gotchas.md)** - Common gotchas, vue-tsc edge cases, hydration issues, race conditions (from vuejs-ai/skills)
104