Generate production-ready Vue.js Cursor rules for Project Rules (.mdc), AGENTS.md, or legacy .cursorrules. This template encodes stack-specific conventions for projects using Vue.js. Progressive JavaScript framework with reactive data binding and composable APIs.
The template focuses Cursor AI on concrete Vue.js practices instead of generic coding advice. Required sections are always included; optional sections can be enabled when they match your project.
The generator turns these sections into Project Rules with frontmatter, AGENTS.md, or a single .cursorrules file depending on the output format you choose.
- Use the Composition API with <script setup> syntax.
- Organize components by feature, not by file type.
- Use 2 spaces for indentation.
- Use camelCase for component names.
- Keep Single-File Components (SFCs) focused and small.
- Group related composables in a composables/ directory.- 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.- 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.