vue

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() over reactive() 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