# Vue

> Vue 3 Composition API — <script setup>, reactivity (shallowRef/ref), props without destructure, computed, watch, provide/inject, and composables. Use when the project uses modern Vue 3 Composition API style. Use when this capability is needed.

- Skill: `tomevault-io/vue-11` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/vue-11`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/vue-11/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-11

---


# Vue 3 (Composition API)

> This skill focuses on the **Composition API** and **`<script setup>`** explicitly strongly typed with TypeScript.

## Key Rules (from instructions)

- **Prefer TypeScript** over JavaScript (`<script setup lang="ts">`).
- **Always use Composition API** over Options API.
- **Prefer `<script setup>`** over explicit `setup()` functions.
- **Prefer `shallowRef` over `ref`** for performance if deep reactivity is not used.
- **Discourage Reactive Props Destructure** (use `props.myProp` instead).

## Core

| Topic | Description | Reference |
|-------|-------------|-----------|
| State & Reactivity | `shallowRef`, `ref`, `computed`, `watch` | [state](references/state.md) |
| Props & Emits | `defineProps` (no destructuring), `defineEmits` | [props-emits](references/props-emits.md) |
| Lifecycle Hooks | `onMounted`, `onUpdated`, `onUnmounted` | [lifecycle](references/lifecycle.md) |

## Features & Patterns

| Topic | Description | Reference |
|-------|-------------|-----------|
| Composables | State logic reuse (instead of Mixins) | [composables](references/composables.md) |
| Provide / Inject | Dependency injection across deep component trees | [provide-inject](references/provide-inject.md) |

## Quick Reference

### Full SFC Template (`<script setup>`)

```vue
<script setup lang="ts">
import { shallowRef, computed, watch, onMounted } from 'vue'

// -- Props & Emits --
interface Props {
  title: string
  count?: number
}
// ❌ Do NOT destructure props, keep the `props` object
const props = withDefaults(defineProps<Props>(), {
  count: 0
})

const emit = defineEmits<{
  update: [newCount: number]
}>()

// -- State --
// ✅ Prefer shallowRef if deep tracking isn't needed
const localCount = shallowRef(props.count)

// -- Computed --
const doubled = computed(() => localCount.value * 2)

// -- Watchers --
watch(() => props.count, (newVal) => {
  localCount.value = newVal
})

// -- Methods --
function increment() {
  localCount.value++
  emit('update', localCount.value)
}

// -- Lifecycle --
onMounted(() => {
  console.log('Component mounted')
})
</script>

<template>
  <div>
    <h1>{{ props.title }}</h1>
    <p>Count: {{ localCount }} | Doubled: {{ doubled }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>
```

---
> Source: [vuluu2k/skills](https://github.com/vuluu2k/skills) — distributed by [TomeVault](https://tomevault.io).
<!-- tomevault:4.0:skill_md:2026-04-19 -->