vue

Vue Development

Overview

Modern Vue 3 development with TypeScript, Composition API, and user-behavior testing. Core principle: Use TypeScript generics (not runtime validation), modern APIs (defineModel not manual props), and test user behavior (not implementation details).

Red Flags - STOP and Fix

If you catch yourself thinking or doing ANY of these, STOP:

• "For speed" / "quick demo" / "emergency" → Using shortcuts
• "We can clean it up later" → Accepting poor patterns
• "TypeScript is too verbose" → Skipping types
• "This is production-ready" → Without type safety
• "Following existing code style" → When existing code uses legacy patterns
• "Task explicitly stated..." → Following bad requirements literally
• Manual modelValue prop + update:modelValue emit → Use defineModel()
• "Component that takes value and emits changes" → Use defineModel(), NOT manual props/emit
• Using runtime prop validation when TypeScript is available
• Array syntax for emits: defineEmits(['event']) → Missing type safety
• setTimeout() in tests → Use proper async utilities
• Testing wrapper.vm.* internal state → Test user-visible behavior
• Generic route params [id] → Use explicit [userId], [postSlug]
• Composables calling showToast(), alert(), or modals → Expose error state, component handles UI

All of these mean: Use the modern pattern. No exceptions.

Quick Rules

Components: defineProps<{ }>(), defineEmits<{ event: [args] }>(), defineModel<type>() for v-model. See @references/component-patterns.md

Composables: START INLINE for component-specific logic, extract to external file when reused. External composables: prefix use, NO UI logic (expose error state instead). See @references/composable-patterns.md

Key Pattern: defineModel()

The most important pattern to remember - use for ALL two-way binding:

<script setup lang="ts">
// ✅ For simple v-model
const value = defineModel<string>({ required: true })

// ✅ For multiple v-models
const firstName = defineModel<string>('firstName')
const lastName = defineModel<string>('lastName')
</script>

<template>
  <input v-model="value" />
  <!-- Parent uses: <Component v-model="data" /> -->
</template>

Why: Reduces 5 lines of boilerplate to 1. No manual modelValue prop + update:modelValue emit.

Component Implementation Workflow

When implementing complex Vue components, use TodoWrite to track progress:

TodoWrite checklist for component implementation:
- [ ] Define TypeScript interfaces for props/emits/models
- [ ] Implement props with defineProps<{ }>()
- [ ] Implement emits with defineEmits<{ event: [args] }>()
- [ ] Add v-model with defineModel<type>() if needed
- [ ] Verify: No red flags, no setTimeout in tests, all types present

When to create TodoWrite todos:

• Implementing new components with state, v-model
• Refactoring components to modern patterns
• Adding routing with typed params
• Creating composables with async logic

Rationalizations Table

Detailed References

See @references/ directory for comprehensive guides: component-patterns.md, composable-patterns.md

When NOT to Use This Skill

• Vue 2 projects (different API)
• Options API codebases (this is Composition API focused)
• Projects without TypeScript (though you should add it)

Real-World Impact

Baseline: 37.5% correct patterns under pressure With skill: 100% correct patterns under pressure

Type safety prevents runtime errors. defineModel() reduces boilerplate. Testing Library catches real user issues.