vuejs_skill

Overview

This skill encapsulates core Vue.js guidance drawn from the official guide, covering essentials, components, built-ins, reusability, extras, and scaling topics. It helps developers find practical patterns for reactive state, component design, routing, TypeScript, and testing. Use it for actionable, example-driven recommendations and best practices when working with Vue applications.

How this skill works

The skill inspects the Vue guide sections relevant to a question—Essentials for reactivity and rendering, Components and Built-ins for component patterns and lifecycle utilities, Reusability for composables, Extras for alternative usages and animations, and Scaling Up for routing and testing. It synthesizes concise recommendations, code patterns, and trade-offs to answer questions about implementation, architecture, and optimization. For TypeScript or accessibility questions, it pulls guidance from the respective sections to give typed patterns and accessibility checks.

When to use it

• Choosing between Options API and Composition API or typing components with TypeScript
• Designing reusable logic with composables or avoiding prop drilling (provide/inject)
• Implementing component-level optimizations like KeepAlive, async components, or lazy hydration
• Setting up routing, client vs server considerations, and official router usage
• Applying best practices for accessibility, forms, and semantic markup
• Adding animations, transitions, or integrating Vue with non-Vue web components

Best practices

• Prefer Composition API for complex state and reusable logic; encapsulate side effects in composables for testability and reuse
• Use reactive primitives (ref/reactive) consistently; avoid mutating props directly and expose actions via emits or methods
• Favor async components and Suspense for large routes or rarely used UI to reduce initial bundle size
• Apply KeepAlive judiciously to cache frequently visited component state; control cached keys with include/exclude and max props
• Use semantic HTML and skip links for accessibility; validate forms using native semantics then enhance with Vue where needed
• Type your props, emits, and composables when using TypeScript to surface errors early and improve DX

Example use cases

• Create a composable to share fetching logic across pages and test it in isolation
• Convert a large SPA route to an async component with a loading and error state to speed initial load
• Use Provide/Inject to pass app-level services like theme or i18n without prop drilling
• Wrap frequently visited view components with KeepAlive and limit cache size with max to manage memory
• Migrate a component to Composition API and add TypeScript types for props and emits to improve maintainability