Vue.js Skill

Version & Setup

• Target Vue 3 for all new code — Vue 2 is EOL.
• Use Vite as the build tool; scaffold with npm create vue@latest.
• Use TypeScript (<script setup lang="ts">); enable strict mode.
• Use Vue Router 4 for routing and Pinia for state management.

Component Style

• Use <script setup> (Composition API) for all new components.
• Keep <template>, <script setup>, and <style> in that order in SFCs.
• Use defineProps, defineEmits, defineExpose macros with TypeScript types.
• Name components in PascalCase in <script> and in templates.
• Co-locate component styles with <style scoped>.
• Follow existing code style and conventions in the project — consistency over strict adherence.
• Apply KISS & DRY, but prioritize consistency with existing code.