Claude Code Plugins

Community-maintained marketplace

Feedback

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

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

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 [object Object]

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