Vue

What it does

This skill provides access to Vue, a progressive JavaScript framework for building user interfaces. It leverages Vue 3.5+ and supports the Composition API with <script setup> and TypeScript for developing type-safe components. The skill enables agents to understand and utilize core Vue concepts like reactivity, props, events (emits), slots, and lifecycle hooks to build reusable UI elements.

When to use it

• Generating or understanding Vue component code snippets.
• Troubleshooting issues related to Vue's reactivity system (e.g., ref, reactive).
• Working with custom components that utilize props, events, or slots.
• Implementing two-way data binding using v-model.
• Developing reusable logic through composables.

Key capabilities

• Reactivity System: Utilizes ref, reactive, computed, watch, and watchEffect for managing component state.
• Component Management: Handles props, events (emits), slots, and v-model.
• Lifecycle Hooks: Allows execution of code at specific stages of a component's lifecycle.
• Script Setup & TypeScript: Supports the Composition API syntactic sugar (<script setup>) and type-safe Vue components with TypeScript.
• Reusability Features: Includes composables for encapsulating stateful logic, custom directives for DOM manipulation, and template refs for direct access to DOM elements.

Example prompts

• "Generate a simple Vue component that displays a counter."
• "Explain how to use v-model in a custom Vue component."
• "Show me an example of a composable in Vue."
• “How do I declare props with TypeScript in a Vue component?”

Tips & gotchas

• It is recommended to use <script setup lang="ts"> for all components.
• Prefer ref() over reactive() when declaring state.
• Utilize type-based prop declarations using interfaces for improved code clarity and maintainability.