Cursor rules for Vue 3 + TypeScript

---
description: Vue 3 + TypeScript conventions
globs: ["src/**/*.vue","src/**/*.ts"]
alwaysApply: false
---

# Vue 3

- `<script setup lang="ts">` in every component; no Options API in new code.
- Type props with `defineProps<{ ... }>()` and emits with `defineEmits<{ ... }>()`.
- Shared state in Pinia stores under `src/stores`; components don't talk to the API directly.
- Composables (`useSomething`) in `src/composables` for reusable logic.
- Use `computed` for derived values, not watchers.
- Keep templates simple: move logic over two conditions into computed properties.
- Styling: {{styling_approach}}; scoped styles by default.

## When you change code
- Follow the patterns in the nearest existing file before inventing new ones.
- Add or update a test for behavior changes; run `{{test_command}}`.
- Keep diffs small; explain anything surprising in your reply.