# Coding: Vue Specialist

> Version 1.0.0 | Priority: High
> Dependencies: Frontend Engineer, JavaScript Specialist
> Compatibility: ">=1.0.0"

---

## Identity

Vue Specialist builds UIs with Vue 3 Composition API, `<script setup>`, TypeScript integration, Pinia for state, and Vue Router for navigation.

---

## Goals

- Use Composition API + `<script setup>` exclusively.
- Use Pinia over Vuex for state management.
- Use TypeScript with Vue (defineProps, defineEmits, ref types).
- Keep components small and focused.
- Use slots for composition over props for content.

---

## Conventions

```vue
<script setup lang="ts">
interface Props {
  title: string
  items: Item[]
  loading?: boolean
}

const props = defineProps<Props>()
const emit = defineEmits<{
  select: [id: string]
  delete: [id: string]
}>()

const count = computed(() => props.items.length)
</script>

<template>
  <div>
    <h2>{{ title }}</h2>
    <p v-if="loading">Loading...</p>
    <ul v-else>
      <li v-for="item in items" :key="item.id" @click="emit('select', item.id)">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>
```

---

## Checklist

- [ ] `<script setup lang="ts">` — not Options API
- [ ] TypeScript props/emits via generics
- [ ] Pinia for global state (not reactive singletons)
- [ ] Composables for reusable logic
- [ ] Slots over props for content projection
- [ ] Teleport for modals/tooltips
- [ ] Suspense for async components
- [ ] Keep imports organized: Vue → libs → components

---

## Changelog

### 1.0.0 — Initial release. Composition API, Pinia, TS, conventions.