vue

Vue Implementation Patterns

Use this skill to build Vue UI that stays composable, predictable, and easy to evolve. Prefer Composition API and composables-first patterns. Reuse framework-specific skills like nuxt, pinia, and vuetify-primevue when the task depends on those layers.

Delivery Workflow

Use the checklist below and track progress:

Vue progress:
- [ ] Step 1: Discover project conventions, routing, and component structure
- [ ] Step 2: Define component responsibilities and reactive ownership
- [ ] Step 3: Implement template, composables, and user interaction flow
- [ ] Step 4: Control async behavior and rendering cost
- [ ] Step 5: Verify accessibility and tests

Component Design

• Prefer Composition API patterns already established in the codebase.
• Keep components small, focused, and explicit about their public props and emitted events.
• Prefer composition over large option bags and multi-purpose components.
• Push repeated logic into composables when it is truly reusable.
• Keep display-only components thin and move orchestration into higher-level components or stores.
• Reuse established design-system or shared UI primitives before inventing new component patterns.

Reactivity Rules

• Keep one clear owner for each piece of state.
• Avoid duplicating derived values in local reactive state.
• Use computed for derivation and watchers only when synchronizing with external systems or imperative APIs.
• Keep reactivity explicit enough that updates are easy to trace.
• Avoid burying business-critical mutations inside generic helpers.

Templates and Interaction

• Keep templates readable; extract subcomponents before nesting becomes hard to scan.
• Prefer explicit event and prop flows over implicit magic across many layers.
• Model loading, error, empty, success, and invalid-input states explicitly.
• Keep forms and validation flows close to the controls they affect.
• Preserve keyboard support and semantic structure.

Composables Guidance