# Vue

> Vue 3 patterns with Composition API and TypeScript. Trigger: When building Vue.js applications with Composition API.

- Skill: `odjaramillo/vue` (Agent Skill)
- Install (CLI): `npx skillmds@latest add odjaramillo/vue`
- Raw SKILL.md: https://api.skillmd.com/api/skills/odjaramillo/vue/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: Apache-2.0
- Author: odjaramillo (https://skillmd.com/u/odjaramillo)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/odjaramillo/vue

---


## Critical Patterns

### Script Setup (REQUIRED)

```vue
<!-- ✅ ALWAYS: Use script setup with TypeScript -->
<script setup lang="ts">
import { ref, computed } from 'vue';

interface User {
  id: string;
  name: string;
}

const props = defineProps<{
  user: User;
}>();

const emit = defineEmits<{
  (e: 'update', value: string): void;
}>();

const count = ref(0);
const doubleCount = computed(() => count.value * 2);
</script>
```

### Composables (REQUIRED)

```typescript
// ✅ ALWAYS: Extract reusable logic into composables
// composables/useUser.ts
export function useUser(userId: Ref<string>) {
  const user = ref<User | null>(null);
  const loading = ref(true);

  watchEffect(async () => {
    loading.value = true;
    user.value = await fetchUser(userId.value);
    loading.value = false;
  });

  return { user, loading };
}
```

### Reactive State (REQUIRED)

```typescript
// ✅ Use ref for primitives
const count = ref(0);

// ✅ Use reactive for objects
const state = reactive({
  users: [] as User[],
  loading: false,
});

// ✅ Use computed for derived state
const activeUsers = computed(() => state.users.filter((u) => u.active));
```

---

## Decision Tree

```
Need primitive state?      → Use ref()
Need object state?         → Use reactive()
Need derived value?        → Use computed()
Need side effect?          → Use watchEffect()
Need specific watch?       → Use watch()
Need reusable logic?       → Create composable
```

---

## Code Examples

### Component with v-model

```vue
<script setup lang="ts">
const model = defineModel<string>();
</script>

<template>
  <input :value="model" @input="model = $event.target.value" />
</template>
```

### Async Component

```typescript
const AsyncModal = defineAsyncComponent(() => import('./components/Modal.vue'));
```

---

## Commands

```bash
npm create vue@latest myapp
npm run dev
npm run build
npm run test:unit
```