Is TypeScript required to use this skill?

While it strongly recommends TypeScript for its type-safety benefits, the logic and reactivity best practices apply to standard JavaScript Vue 3 projects as well.

Does this skill support the Options API?

The skill can interpret Options API but strongly recommends and defaults to the Composition API with for modern Vue 3 development.

Can it help with Vue performance optimization?

Yes, it includes specific guidance on using shallowRef for large objects, optimizing watchers, and preventing unnecessary component re-renders.

Does it provide guidance for state management?

Yes, it includes best practices for Pinia and the Provide/Inject API to ensure clean, maintainable state distribution across your application.

Vue.js Best Practices & Composition API

Name: Vue.js Best Practices & Composition API
Author: stevessr

bystevessr

0•

デザインツール

Enforces modern Vue 3 standards using the Composition API, TypeScript, and optimized reactivity patterns for production-grade applications.

This skill serves as an authoritative guide for Vue.js development, specifically optimized for Vue 3 and the script setup pattern. It assists developers in navigating complex reactivity hazards, such as losing reactivity during destructuring or managing deep watchers, while ensuring adherence to the latest ecosystem standards including Pinia, Vue Router, and Vite. Whether you are migrating from the Options API or building a new SSR-compatible application, this skill provides the architectural patterns and performance optimizations necessary to create maintainable, type-safe Vue components.

主な機能

01Strict enforcement of Vue 3 Composition API and <script setup> syntax.

02Integrated support for TypeScript, Volar, and vue-tsc validation.

030 GitHub stars

04Advanced reactivity troubleshooting for ref(), reactive(), and shallowRef().

05Performance-focused guidance for watchers, computed properties, and lifecycle hooks.

06Optimized component patterns for props, emits, slots, and provide/inject.

ユースケース

01Migrating legacy Vue 2 Options API codebases to modern Vue 3 Composition API.

02Debugging complex state management and reactivity issues in large-scale applications.

03Architecting high-performance frontend components with Vite and Pinia.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add stevessr/dotsfiles vue-best-practices

For use in Claude.ai and ChatGPT

Download Skill