vuejs-development_skill

Overview

This skill provides practical, up-to-date guidance for building modern Vue.js applications using the Composition API, reactivity system, single-file components, directives, and lifecycle hooks. It focuses on official Vue 3 patterns that improve maintainability, reusability, and performance. The content is designed for developers migrating from Options API and for teams adopting TypeScript and component-driven workflows.

How this skill works

The skill explains how Vue's reactivity (ref, reactive, computed, watch) tracks dependencies and updates the DOM automatically. It demonstrates component patterns with <script setup>, verbose setup(), SFC structure, template directives (v-bind, v-on, v-model, v-if, v-for, v-show) and lifecycle hooks like onMounted. Examples cover state handling, computed properties, watchers, and common patterns for form handling, events, and list rendering.

When to use it

• Building single-page applications (SPAs) or progressive web apps (PWAs) with Vue 3
• Creating reusable component libraries and design-system components
• Migrating existing code from Options API to the Composition API
• Integrating TypeScript for stronger typing and safer refactoring
• Implementing forms, data fetching, and local component state
• Optimizing performance and reactivity for large or dynamic UIs

Best practices

• Prefer <script setup> for concise components and better DX, fall back to setup() when needed
• Use ref() for primitives and reactive() for complex objects; avoid mixing without clear rules
• Wrap derived logic in computed and side effects in watch or watchEffect to keep templates declarative
• Use keys in v-for and avoid expensive computations inside templates; move logic to computed
• Favor small, focused components, pass data via props and emit events for parent communication
• Use v-show for frequent toggles and v-if for conditional creation to balance performance

Example use cases

• A todo or task app demonstrating SFCs, v-model, list rendering, and computed stats
• A form-heavy admin panel with validation, v-model modifiers, and controlled inputs
• A component library using Composition API hooks for shared behavior and TypeScript types
• Migrating a legacy Options API page to Composition API step-by-step with refactoring tips
• Implementing real-time updates with reactive objects and watchers tied to a WebSocket