# AGENTS.md — Vue 3

Composition API + `<script setup>` SFCs, following the official Vue Style Guide.

- Component names are multi-word (`TodoItem`), except the root `App`.
- One component per file; filename casing is consistently PascalCase or kebab-case.
- Reference components in PascalCase in SFC templates and self-close empty ones (`<TodoItem/>`).
- Prefer full words over abbreviations; name general-to-specific; prefix tightly-coupled children with the parent.
- Base/presentational components are prefixed `Base`, `App`, or `V`.
- Always give props detailed definitions (at least a type); never the bare-array form. Declare names in camelCase.
- `v-for` always has a `:key`.
- Never put `v-if` and `v-for` on the same element — filter via a computed property or move `v-if` out.
- Keep template expressions simple; move complex logic into computed properties or methods.
- Split complex computed properties into smaller single-purpose ones.
- Quote non-empty attribute values; one attribute per line on multi-attribute elements.
- Use directive shorthands (`:`, `@`, `#`) consistently — always or never.
- Scope component styles; only `App`/layout components may be global.
- Use `shallowRef`/`shallowReactive` for large immutable data; keep child props stable; use `v-once`/`v-memo` and list virtualization for perf-critical views.