# Odjaramillo Custom Rules Vue

> Critical Patterns

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

---
> Source: [odjaramillo/custom-rules](https://github.com/odjaramillo/custom-rules) — distributed by [TomeVault](https://tomevault.io).
<!-- tomevault:4.0:skill_md:2026-06-16 -->