vue
Vue.js progressive JavaScript framework. Use when building Vue components, working with reactivity (ref, reactive, computed, watch), or implementing Vue Composition API patterns.
Installation
Details
Usage
After installing, this skill will be available to your AI coding assistant.
Verify installation:
npx agent-skills-cli listSkill Instructions
name: vue description: Vue.js progressive JavaScript framework. Use when building Vue components, working with reactivity (ref, reactive, computed, watch), or implementing Vue Composition API patterns. metadata: author: Anthony Fu version: '2026.1.28' source: Generated from https://github.com/vuejs/docs, scripts located at https://github.com/antfu/skills
Vue
The skill is based on Vue 3.5+, generated at 2026-01-28.
Vue is a progressive JavaScript framework for building user interfaces. It builds on standard HTML, CSS, and JavaScript with intuitive API and world-class documentation. The Composition API with <script setup> and TypeScript is the recommended approach for building Vue applications.
Core References
| Topic | Description | Reference |
|---|---|---|
| Reactivity System | ref, reactive, computed, watch, and watchEffect | core-reactivity |
Components
| Topic | Description | Reference |
|---|---|---|
| Props | Declare and validate component props with TypeScript | components-props |
| Events (Emits) | Emit custom events from components | components-emits |
| Slots | Pass template content to child components | components-slots |
| v-model | Two-way binding on custom components | components-v-model |
| Lifecycle Hooks | Run code at specific component lifecycle stages | components-lifecycle |
Features
Script Setup & TypeScript
| Topic | Description | Reference |
|---|---|---|
| Script Setup | Composition API syntactic sugar for SFCs | features-script-setup |
| TypeScript | Type-safe Vue components with Composition API | features-typescript |
Reusability
| Topic | Description | Reference |
|---|---|---|
| Composables | Encapsulate and reuse stateful logic | features-composables |
| Custom Directives | Low-level DOM manipulation directives | features-directives |
| Template Refs | Direct DOM and component instance access | features-template-refs |
Advanced
| Topic | Description | Reference |
|---|---|---|
| Provide/Inject | Dependency injection across component tree | advanced-provide-inject |
| Async & Suspense | Top-level await pitfalls, async components, Suspense | advanced-async-suspense |
Key Recommendations
- Use
<script setup lang="ts">for all components - Prefer
ref()overreactive()for declaring state - Use type-based prop declarations with interfaces
- Use
defineModel()for v-model (3.4+) - Destructure props reactively (3.5+) for cleaner code
- Extract composables for reusable stateful logic
More by AloisH
View allReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
Nuxt full-stack Vue framework with SSR, auto-imports, and file-based routing. Use when working with Nuxt apps, server routes, useFetch, middleware, or hybrid rendering.
Vue 3 and Vue.js best practices for TypeScript, vue-tsc, and Volar. This skill should be used when writing, reviewing, or refactoring Vue components to ensure correct typing patterns. Triggers on tasks involving Vue components, props extraction, wrapper components, template type checking, or Volar configuration.
Vite next-generation frontend build tool with fast HMR and optimized builds. Use when configuring Vite, adding plugins, working with dev server, or building for production.