Vue 3 Development

Vue 3 Development

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.

Overview

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).

When to Use

Use this skill when:

• Writing .vue components
• Creating composables (use* functions)
• Building client-side utilities
• Testing Vue components/​composables

Use nuxt skill instead for:

• Server routes, API endpoints
• File-based routing, middleware
• Nuxt-specific patterns

For styled UI components: use nuxt-ui skill For headless accessible components: use reka-ui skill For VueUse composables: use vueuse skill

Quick Reference

Loading Files

Consider loading these reference files based on your task:

• references/​components.md - if working in components/ or writing .vue files
• references/​composables.md - if creating composables (use* functions)
• references/​utils-client.md - if working in utils/ or writing client utilities
• references/​testing.md - if writing .spec.ts or .test.ts files
• references/​typescript.md - if working with Vue TypeScript patterns or generics
• references/​router.md - if working with Vue Router or route typing
• references/​reactivity.md - if using ref, reactive, computed, watch, or watchEffect
• references/​directives.md - if creating or using custom directives
• references/​provide-inject.md - if using provide/​inject patterns
• references/​gotchas.md - if debugging edge cases or hydration issues

DO NOT load all files at once. Load only what's relevant to your current task.

Quick Start

<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>

Available Guidance

references/​components.md - Props with reactive destructuring, emits patterns, defineModel for v-model, slots shorthand

references/​composables.md - Composition API structure, VueUse integration, lifecycle hooks, async patterns, reactivity gotchas

references/​utils-client.md - Pure functions, formatters, validators, transformers, when NOT to use utils

references/​testing.md - Vitest + @vue/​test-utils, component testing, composable testing, router mocking

references/​typescript.md - InjectionKey for provide/​inject, vue-tsc strict templates, tsconfig settings, generic components

references/​router.md - Route meta types, typed params with unplugin-vue-router, scroll behavior, navigation guards

references/​reactivity.md - ref, reactive, computed, watch, watchEffect, reactivity fundamentals

references/​directives.md - Custom directive hooks, v-focus, v-click-outside, v-tooltip patterns

references/​provide-inject.md - InjectionKey typing, app-level provide, readonly patterns

references/​gotchas.md - Common gotchas, vue-tsc edge cases, hydration issues, race conditions (from vuejs-ai/​skills)