When is this skill automatically activated?

It triggers whenever you work on .vue files, Vue Router configurations, Pinia stores, or Vite projects focused on Vue.

Can this skill help with Pinia or Vue Router?

Yes, it provides architectural guidance for the entire Vue ecosystem, including state management with Pinia and routing best practices.

Does this skill support the Options API?

While it includes migration paths, the skill strongly recommends and defaults to the Composition API with for modern Vue 3 development.

Does it help with Vue 3 TypeScript integration?

Yes, it provides specific implementation patterns for Volar, vue-tsc, and defining type-safe props, emits, and slots.

Does it provide performance optimization for large datasets?

Absolutely. It covers advanced techniques like shallowRef for large objects and computed property caching to ensure smooth UI performance.

Vue.js Best Practices

Name: Vue.js Best Practices
Author: vuejs-ai

byvuejs-ai

•

1,280

开发者工具

Optimizes Vue 3 development by enforcing Composition API standards, TypeScript integration, and reactivity performance patterns.

关于

This skill equips Claude with a deep understanding of Vue 3 architecture, specifically prioritizing the Composition API with `<script setup>` and TypeScript. It serves as a comprehensive guide for modern frontend development, helping users avoid common reactivity pitfalls, optimize computed properties, and implement scalable component patterns. Whether you are building complex state management with Pinia or fine-tuning Vite-based workflows, this skill ensures your code adheres to official Vue community standards and performance best practices.

主要功能

1,280 GitHub stars
Prevents performance bottlenecks in watchers, computed properties, and list rendering
Provides deep-dive guidance on Vue 3 reactivity, including ref vs. reactive hazards
Enforces Composition API and <script setup> as the primary development standard
Optimizes component communication through validated props, emits, and provide/inject patterns
Ensures TypeScript type safety across components, composables, and scoped slots

使用场景

Refactoring legacy Options API components into modern Composition API with TypeScript
Debugging and optimizing high-frequency UI updates and complex form reactivity
Architecting complex reactive state logic and custom composables for enterprise applications

关于

主要功能

1,280 GitHub stars
Prevents performance bottlenecks in watchers, computed properties, and list rendering
Provides deep-dive guidance on Vue 3 reactivity, including ref vs. reactive hazards
Enforces Composition API and <script setup> as the primary development standard
Optimizes component communication through validated props, emits, and provide/inject patterns
Ensures TypeScript type safety across components, composables, and scoped slots

使用场景

Refactoring legacy Options API components into modern Composition API with TypeScript
Debugging and optimizing high-frequency UI updates and complex form reactivity
Architecting complex reactive state logic and custom composables for enterprise applications