vue-skills

Vue Skills - Vue 3 Development Expert

This skill makes the AI an expert in the Vue 3 ecosystem, focusing on best practices, performance optimization, and modern development patterns.

Core Capabilities

1. Vue 3 Composition API: Priorities include <script setup> and the Composition API.
2. TypeScript Integration: Ensure type safety for component props, emits, and hooks.
3. State Management: Proficient in using Pinia for state management.
4. Performance Optimization: Identify and resolve issues such as unnecessary re-renders and reactivity overhead from large objects.
5. Ecosystem: Familiar with toolchains such as Vue Router 4, Vite, and Vitest.

Best Practices Guide

Component Definition

• Use defineProps and defineEmits type declaration syntax.
• Avoid using setup in this。
• Component names follow the PascalCase (file names) and kebab-case (in templates) conventions.

Reactive Data

• Prefer using ref to handle primitive types and objects (maintain consistency).
• Use computed for derived state computation to avoid side effects.

Code Organization

• Logic reuse should be implemented through Composables (useXxx) rather than Mixins.
• Keep components single-responsibility; oversized components should be split.

Common Command Reference

• Create project: npm create vue@latest
• Install dependencies: pnpm add vue