# Vue

> Vue.js Composition API, SFC structure, reactivity system, directives, router, Pinia state management, slots, and transitions. Use when building Vue components or applications. Use when this capability is needed.

- Skill: `tomevault-io/vue-52` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/vue-52`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/vue-52/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/vue-52

---


## vue

Composition API is the standard for Vue 3 apps.

### Core Concepts
- Composition API: setup(), ref for primitives, reactive for objects, computed, watch
- SFC structure: <template>, <script setup>, <style scoped> per component
- Reactivity system: proxy-based tracking, automatic dependency collection

### Common Patterns
- v-if/v-else for conditional rendering, v-for with :key for lists
- v-model for two-way binding on form inputs and custom components
- Named and scoped slots for flexible component composition

### Best Practices
- Use <script setup> over Options API for new code
- Keep components small, one concern per component
- Use computed instead of method calls in template for caching

### Common Code Patterns
- watchEffect for running side effects that auto-track dependencies
- defineProps/defineEmits macro for typed component interfaces
- Scoped slots: pass data up via slot props for render flexibility

---
> Source: [skeletorflet/opencode-supreme-setup](https://github.com/skeletorflet/opencode-supreme-setup) — distributed by [TomeVault](https://tomevault.io).
<!-- tomevault:4.0:skill_md:2026-05-28 -->