🚀 Vue 3 Cursor Rules - Production Ready

# 🚀 Vue 3 Cursor Rules - Production Ready

![GitHub stars](https://img.shields.io/github/stars/aliarghyani/vue-cursor-rules?style=social)
![License](https://img.shields.io/badge/license-MIT-blue.svg)
![Vue 3](https://img.shields.io/badge/Vue-3.x-4FC08D.svg)
![TypeScript](https://img.shields.io/badge/TypeScript-Ready-3178C6.svg)
![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)

**The most comprehensive Vue 3 development rules collection** that transforms your coding experience with intelligent automation. Perfect for developers at any level who want to build **production-ready, maintainable, and performant** Vue 3 applications.

## ⚡ Why Choose Vue 3 Cursor Rules?

- 🎯 **Instant Setup**: Copy-paste ready rules that work out of the box
- 🧠 **Smart Automation**: AI-powered suggestions based on your codebase
- 📈 **Performance First**: Built-in optimization patterns
- ♿ **Accessibility Ready**: WCAG 2.1 AA compliance by default
- 🔒 **Security Focused**: XSS and CSRF protection patterns
- 🚀 **Production Tested**: Field-tested patterns for reliable Vue 3 development

## ✅ Core Principles
- Inbox‑Zero: each rule file is tiny (≤4KB), focused, and copy‑paste ready.
- Neutral Core: no lock‑in to any UI kit; optional adapters for Vuetify/Quasar/Element Plus/Tailwind/Headless.
- AI Consistency: standard role + preflight checklist + output contract.
- Modern Vue Only: Composition API + TypeScript; no Options API.
- Practical Examples: complete imports and explicit types.

## 💰 Money-Smart Development

### Budget Mode Features
- **Token discipline**: Micro-changes only, no full-file dumps
- **Intelligent batching**: Group related changes by architectural concern
- **Performance-first**: Suggest optimizations that reduce bundle size
- **Code reuse**: Prioritize existing patterns and utilities

### Development Efficiency
- **Evidence-based suggestions**: Reference existing codebase patterns
- **Architectural guidance**: SOLID principles, clean code practices
- **Error prevention**: TypeScript-first, comprehensive validation
- **Performance optimization**: Memory management, lazy loading

## 🚀 What You Get

### 🎯 **Core Stack (Perfect for Most Projects)**
- **Vue 3** with Composition API + `<script setup>`
- **TypeScript** for type safety and better DX
- **Vite** for lightning-fast development
- **Tailwind CSS** for rapid styling
- **Pinia** for predictable state management

### 🎨 **Smart Development Patterns**
- **Component Architecture**: Clean, reusable, testable components
- **Performance First**: Lazy loading, code splitting, memory management
- **Error Handling**: Graceful failures with user-friendly messages
- **Accessibility**: Screen reader support, keyboard navigation
- **Security**: XSS prevention, secure data handling
- **Testing**: Unit, integration, and e2e test patterns

### 📦 **Popular UI Library Support**
- **Vuetify** - Material Design made easy
- **Ant Design Vue** - Enterprise-class components
- **Element Plus** - Desktop-focused UI library
- **Naive UI** - TypeScript-native components
- **PrimeVue** - Rich component ecosystem
- **Quasar** - Cross-platform development

Note: Core is UI‑agnostic; adapters are optional and minimal — no lock‑in.

### 🛠️ **Essential Developer Tools**
- **Vue Router 4** - Modern client-side routing
- **Vue I18n 9+** - Internationalization made simple
- **Fetch API** - Modern HTTP client with composable patterns
- **VueUse** - Composition utilities collection


### 3️⃣ **Start Coding! 🎉**
Rules automatically activate based on what you're working on:
- Create a `.vue` file → Get Vue 3 + TypeScript patterns
- Work in `/composables` → Get reusable logic patterns  
- Build forms → Get validation and accessibility guidance
- Make API calls → Get fetch patterns with error handling
- Write tests → Get component testing patterns

## 🚀 **Getting Started**

Ready to transform your Vue 3 development experience? Here's what to do:

1. **📋 Clone the repository**: `git clone https://github.com/aliarghyani/vue-cursor-rules.git`
2. **📎 Copy rules to your project**: `cp -r vue-cursor-rules/.cursor ./your-vue-project/`
3. **💻 Open in Cursor IDE**: `cursor your-vue-project`
4. **✨ Start coding**: Rules activate automatically based on file types
5. **📄 Explore examples**: Check the `/examples` folder for working patterns
6. **📆 Read detailed docs**: Visit `/docs` for comprehensive guides

## 🎯 How Rules Work

### 🔄 **Auto-Activation**
Rules activate automatically based on file patterns:
- `*.vue` files → Vue fundamentals and component patterns
- `/composables/**` → Composition function patterns
- `/stores/**` → Pinia state management
- `*.test.ts` → Testing patterns
- `tailwind.config.*` → Tailwind CSS patterns
- UI kit files → Framework-specific adaptations

### 🧠 **Smart Context**
Cursor intelligently suggests relevant patterns:
- Working on forms? Get validation and accessibility patterns
- Making API calls? Get fetch patterns with error handling
- 

... (truncated)