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

•

Developer Tools

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.

Key Features

011,280 GitHub stars

02Prevents performance bottlenecks in watchers, computed properties, and list rendering

03Provides deep-dive guidance on Vue 3 reactivity, including ref vs. reactive hazards

04Enforces Composition API and <script setup> as the primary development standard

05Optimizes component communication through validated props, emits, and provide/inject patterns

06Ensures TypeScript type safety across components, composables, and scoped slots

Use Cases

01Refactoring legacy Options API components into modern Composition API with TypeScript

02Debugging and optimizing high-frequency UI updates and complex form reactivity

03Architecting complex reactive state logic and custom composables for enterprise applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add vuejs-ai/skills vue-best-practices

For use in Claude.ai and ChatGPT

Download Skill