vue_skill

Overview

This skill explains when and why to choose Vue 3 Composition API over the Options API and provides practical guidance for building production-ready frontends. It focuses on reactivity primitives, component communication, routing, Pinia state stores, performance, testing, accessibility, and security. The material is geared toward new projects and modern tooling (Vite, TypeScript, Vitest).

How this skill works

The skill inspects common patterns and trade-offs between Composition API and Options API, then recommends Composition API with <script setup> for new projects. It outlines how to use reactive primitives (ref, reactive, computed, watch), typed props/emits, provide/inject, typed routing, and Pinia stores. It also covers performance optimizations, testing practices, accessibility checkpoints, and security mitigations to apply across the stack.

When to use it

• Starting a new Vue 3 project that needs strong TypeScript support
• Refactoring components to improve testability and reuse with composables
• Building complex apps that require typed state management and typed routing
• Optimizing performance for large lists, lazy-loaded routes, and expensive renders
• Enforcing standards in teams that require linting, testing, and CI/CD pipelines

Best practices

• Prefer Composition API with <script setup> for clearer TypeScript and reusable logic
• Define props and emits with TypeScript types for safer component contracts
• Encapsulate logic in composables to share behavior and simplify testing
• Use Pinia with typed stores and persist user preferences when needed
• Lazy load routes and components, use virtual scrolling and v-memo for expensive renders
• Apply WCAG 2.1 AA practices, sanitize inputs, and configure CSP headers

Example use cases

• A new dashboard app using Vite, TypeScript, Pinia, and Vue Router with typed routes
• A multi-team product where shared composables enforce consistent business logic and testing patterns
• A high-traffic list view using virtual scrolling and route-level lazy loading for performance
• An authenticated application with route guards, persisted store preferences, and secure API communication
• A component library that exports typed props/emits and is verified with Vitest and component tests