Vue.js Cursor Rules Template

---
description: "Project Structure"
alwaysApply: false
---
- Use the Composition API with <script setup> syntax.
- Organize components by feature, not by file type.
- Use    spaces for indentation.
- Use camelCase for component names.
- Keep Single-File Components (SFCs) focused and small.
- Group related composables in a composables/ directory.

---
description: "Component Patterns"
alwaysApply: false
---
- Use defineProps with TypeScript generics for type safety.
- Use defineEmits for event declarations.
- Extract reusable logic into composables (useXxx convention).
- Use provide/inject for deep component communication.
- Prefer v-model for two-way binding on form components.
- Use defineExpose sparingly — prefer props and emits.

---
description: "Reactivity"
alwaysApply: false
---
- Use ref() for primitive values and reactive() for objects.
- Use computed() for derived state.
- Use watch() or watchEffect() for side effects with cleanup.
- Use shallowRef/shallowReactive for large datasets.
- Avoid mutating props directly — use emits or v-model.
- Use toRefs() when destructuring reactive objects.

---
description: "Routing"
alwaysApply: false
---
- Use Vue Router 4 with composition API.
- Define routes with lazy loading for code splitting.
- Use route params and query with useRoute().
- Use navigation guards (beforeEach) for auth and redirects.
- Use RouterLink for internal navigation.
- Use named routes for maintainable navigation.