vue-typescript

This skill provides a robust architectural framework for developers working with modern Vue 3 ecosystems. It streamlines the implementation of complex frontend components by enforcing TypeScript best practices, reactive state management, and modular code structures. Whether you are migrating from Options API or architecting a new enterprise application from the ground up, this skill ensures your codebase adheres to clean, maintainable patterns. It is designed for frontend engineers, full-stack developers, and teams utilizing the latest Vue ecosystem tools.

• Full support for script setup syntax combined with strict TypeScript interfaces and types.

• Advanced composable development patterns, including reactive data fetching, lifecycle management, and custom hook creation.

• Deep integration with Pinia for scalable state management, including store definitions, store-to-refs destructuring, and computed getters.

• Standardized Vue Router patterns for route definition, lazy loading, and type-safe parameter handling.

• Implementation of generic components to enhance reusability across complex user interfaces.

• Form handling workflows using VeeValidate in conjunction with Zod for schema-based validation.

• Always prioritize defineProps and defineEmits with TypeScript interfaces to ensure full type safety between parent and child components.

• Use composables for cross-component logic sharing to keep the component script layer thin and readable.

• When working with Pinia, prefer setup-based stores for better composability and TypeScript inference.

• Ensure all route parameters are explicitly typed to prevent runtime errors when accessing route data.

• When implementing complex forms, use toTypedSchema for seamless Zod and VeeValidate integration.

• Inputs typically involve component requirements, API endpoint specifications, or business logic workflows; outputs include functional Vue components, optimized stores, and modular utility files.