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
Reference for Vue 3 Composition API patterns, component architecture, and testing practices.
Current stable: Vue 3.5+ with enhanced reactivity performance (-56% memory, 10x faster array tracking), new SSR features, and improved developer experience.
Progressive 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).
Use this skill when:
.vue componentsuse* functions)Use nuxt skill instead for:
For styled UI components: use skill use skill use skill
nuxt-uireka-uivueuse| Working on... | Load file |
|---|---|
.vue in components/ | references/components.md |
File in composables/ | references/composables.md |
File in utils/ | references/utils-client.md |
.spec.ts or .test.ts | references/testing.md |
| TypeScript patterns | references/typescript.md |
| Vue Router typing | references/router.md |
| Reactivity (ref, watch) | references/reactivity.md |
| Custom directives | references/directives.md |
| Provide/inject | references/provide-inject.md |
| Edge cases, vue-tsc | references/gotchas.md |
Consider loading these reference files based on your task:
components/ or writing .vue filesuse* functions)utils/ or writing client utilities.spec.ts or .test.ts filesDO NOT load all files at once. Load only what's relevant to your current task.
<script setup lang="ts">
const { count = 0 } = defineProps<{ count?: number }>()
const emit = defineEmits<{ update: [value: number] }>()
</script>
<template>
<button @click="emit('update', count + 1)">
Count: {{ count }}
</button>
</template>