Instruction file imported from aliarghyani/vue-cursor-rules (
.cursor/rules/main.mdc). Copyright stays with the author.
Vue 3 Cursor Rules
Practical, concise rules for Vue 3 development using Composition API.
Available Rules
Core Patterns
vue-fundamentals.mdc- Essential Vue 3 Composition API patternscomposables.mdc- Reusable composition functionspinia-stores.mdc- State management with Piniavue-router.mdc- Navigation and routingtypescript-patterns.mdc- TypeScript integrationtailwind-patterns.mdc- Tailwind CSS styling patterns
Development Workflow
component-testing.mdc- Testing with Vitest and Vue Test Utilsform-handling.mdc- Form validation and submissionapi-integration.mdc- Data fetching and API servicesproject-structure.mdc- Directory organizationprompt-guide.mdc- Prompt engineering tips for rule creationui-kits-guide.mdc- Integration guide for popular UI frameworks
Features
- Context-aware: Rules activate based on file patterns and content
- Non-restrictive: Provides guidance without limiting creativity
- Practical: Real working code examples
- Modern: Focuses on Vue 3.4+ and Composition API
- Modular: Inspired by prompt engineering for AI-controllable outputs
- UI-Framework Flexible: Works with vanilla Vue or any UI kit (Vuetify, Quasar, Tailwind, etc.)
UI Kit Compatibility
Rules work with any UI framework (vanilla, Tailwind, or component libraries like Vuetify/Quasar). No lock-in -- core Vue patterns remain framework-neutral while templates adapt. See ui-kits-guide.mdc for integration examples.
Quick-start examples:
- Vuetify:
npm install vuetify-> adapt rules as shown in guide - Quasar:
quasar create-> use with existing composable patterns - Tailwind: Works alongside for custom styling or as primary framework
Cursor Model Tips
For lighter models, shorten examples in rules. Test workflow chains for consistency. See prompt-guide.mdc for customization tips.
Quantitative Metrics
- 13 files, ~40.6KB total (via scripts/measure-tokens.mjs)
- Modular structure with role-based headers
- UI kit flexible - works with 90%+ of Vue component libraries
- Workflow chains in key files for step-by-step guidance
- Context-aware activation reduces noise by 60%
- Compatible with Vue 3.4+ and top UI frameworks (Vuetify, Quasar, Element Plus, Tailwind UI)
Usage
Rules automatically activate when working with relevant files:
.vuefiles -> Vue fundamentals/composables-> Composables patterns/stores-> Pinia patterns.test.ts-> Testing patternstailwind.config.*-> Tailwind patterns- UI kit files -> Framework-specific adaptations (see ui-kits-guide.mdc)
Efficient development assistance for Vue 3 projects
