vue-development

# Vue Development Skill Expert assistance for building Vue 3 applications with Composition API and modern patterns. ## Capabilities - Create Vue 3 components with Composition API - Implement reactive state with ref and reactive - Build composables for reusable logic - Configure TypeScript with Vue - Set up Vue Router and navigation guards - Implement provide/inject for dependency injection ## Usage Invoke this skill when you need to: - Create Vue 3 components - Build composables for shared logic - Set up Vue project structure - Implement reactive patterns - Configure Vue with TypeScript ## Inputs | Parameter | Type | Required | Description | |-----------|------|----------|-------------| | componentName | string | Yes | Component name (PascalCase) | | compositionApi | boolean | No | Use Composition API (default: true) | | typescript | boolean | No | Use TypeScript (default: true) | | scriptSetup | boolean | No | Use script setup (default: true) | ### Configuration Example ```json { "componentName": "UserProfile", "compositionApi": true, "typescript": true, "scriptSetup": true, "features": ["props", "emits", "slots"] } ``` ## Component Patterns ### Script Setup Component ```vue <!-- components/UserProfile.vue --> <script setup lang="ts"> import { ref, computed, onMounted } from 'vue'; interface User { id: string; name: string; email: string; avatar: string; } // Props with defaults const props = withDefaults(defineProps<{ user: User; editable...