---
description: Vue 3 Composition API + script setup conventions
globs: ["**/*.vue"]
alwaysApply: true
---

- Multi-word component names (`TodoItem`), except the root `App`.
- One component per file; consistent PascalCase or kebab-case filenames.
- PascalCase component refs in SFC templates; self-close empty components.
- Prefer full words; name general-to-specific; prefix coupled children with parent.
- Detailed prop definitions with at least a type; declare names in camelCase.
- `v-for` always carries a `:key`.
- Never `v-if` and `v-for` on the same element — filter via computed.
- Keep template expressions simple; split complex computed properties.
- Quote attribute values; use directive shorthands (`:`, `@`, `#`) consistently.
- Scope component styles; only `App`/layout may be global.
- `shallowRef`/`shallowReactive` for large immutable data; `v-once`/`v-memo` for perf.