VueJS Modern

Overview

Use this skill to enforce Vue 3.5.x core best practices with strict TypeScript and migration-aware legacy handling. Generate only modern patterns for new code and refactor existing legacy patterns incrementally.

Load References On Demand

• Read references/vue-3-5-modern-patterns.md for the canonical Vue 3.5+ recipes and API usage patterns.
• Read references/vue-3-legacy-replacements.md for migration mapping, compatibility exceptions, and modernization sequence.

Core Workflow

1. Detect Vue version family and tooling from package.json, lockfiles, vite.config.*, vue.config.*, and TypeScript config.
2. Confirm the task is Vue core scope (SFCs, reactivity, watchers, SSR and hydration, component contracts). If the task is Nuxt-specific, defer framework rules to .agents/skills/nuxt-modern/SKILL.md.
3. Implement with strict TypeScript and SFC default script setup plus lang="ts".
4. Apply Vue 3.5 patterns from references/vue-3-5-modern-patterns.md.
5. Reject legacy output and apply migration mapping from references/vue-3-legacy-replacements.md when updating existing code.
6. Validate behavior with typecheck, lint, and tests available in the target project.