vue

by @antfu in AI & LLM

868

# Install this skill:

npx skills add antfu/skills --skill "vue"

Install specific skill from multi-skill repository

# Description

Vue.js progressive JavaScript framework. Use when building Vue components, working with reactivity (ref, reactive, computed, watch), or implementing Vue Composition API patterns.

# SKILL.md

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

# Supported AI Coding Agents

This skill is compatible with the SKILL.md standard and works with all major AI coding agents:

⚡ Amp 🚀 Antigravity 🤖 Claude Code 🦀 Clawdbot 📝 Codex ▶️ Cursor 🤖 Droid 💎 Gemini CLI 🐙 GitHub Copilot 🪿 Goose 📊 Kilo Code 🔧 Kiro CLI 💻 OpenCode 🦘 Roo Code 🌲 Trae 🏄 Windsurf

Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.

vue