vue-development

# Vue Development

## Research Protocol

**MANDATORY:** Follow the research protocol in `@shared/research-protocol.md` before implementing Vue patterns.

### When to Research

You MUST use `mcp__Ref__ref_search_documentation` before:
- Using Vue APIs you haven't verified this session (defineModel, defineProps, defineEmits)
- Writing tests with Testing Library or Vitest
- Implementing routing patterns with Vue Router 4
- Using version-specific features (Vue 3.4+, Vue 3.5+)

**If official documentation differs from this skill, documentation takes precedence.**

## 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
- Using `const props = defineProps()` without using props in script
- 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
- Using `index.vue` in routes → Use route groups `(name).vue`
- Generic route params `[id]` → Use explicit `[userId]`, `[postSlug]`
- Composables calling `showToast()`, `alert()`, or modals → Expose error state, component hand