Vue Component Builder

Vue Component Builder accelerates Vue 3 development by generating complete, idiomatic components that follow official Vue style guidelines. It handles the full component lifecycle from props definition to template rendering and test coverage.

What It Generates

• Script setup syntax using `<script setup lang="ts">` for concise, type-safe components
• Props and emits with full TypeScript interfaces and runtime validation
• Composable extraction — logic naturally extracted into `use*` composables when complexity warrants
• Scoped styles with optional CSS custom properties for theming
• Vitest unit tests covering props, events, and slot rendering

Workflow

1. Describe the component's purpose and required props
2. The skill generates the `.vue` file with proper structure
3. Companion test file is created alongside
4. The skill explains key design decisions inline

Best Practices Enforced

• Single-responsibility components under 150 lines
• Explicit `defineProps` and `defineEmits` with TypeScript generics
• Accessibility attributes (ARIA roles, labels) included by default
• No implicit `any` — strict typing throughout

Works seamlessly with Vite, Nuxt 3, and Pinia for state management.