Sharing a Cursor Project Rule (for Front-end Vue 3 Projects)

Sharing a Cursor project rule that I’m currently using (applicable for front-end Vue 3 project development).

You can also directly download the cursor-project-rules-for-vue3-en.mdc file and place it in the .cursor\rules directory under your project root. Cursor will automatically enable all rules in this directory.

—

description: “Lanxk.com Vue 3 Project Standards”

globs: [”**/*.{vue,ts,scss,js,jsx,tsx}”]

alwaysApply: true

—

Project Standards

Technology Stack Standards

• Frontend Framework: Vue 3 (v3.5.13, Composition API)
• UI Framework: Element Plus (v2.7.4)
• State Management: Pinia (v2.1.7)
• Styling: SASS (v1.75.0)
• Build Tool: Vite (v5.2.6)
• TypeScript (v5.7.x)
• Node.js (≥v18.0.0)

Code Standards

Component Development Standards

• Use PascalCase for naming Vue component files (e.g., TemplateBase.vue)
• Place components with similar functionality in the same directory
• Components must use the <script setup> syntax
• Props definitions must specify types and default values
• Direct modification of props is prohibited; use emit to notify the parent component to update

Styling Standards

• Use kebab-case for naming CSS classes (e.g., todo-list)
• Must follow BEM naming conventions:
  • Block: block
  • Element: block__element
  • Modifier: block--modifier
• Component styles must use the scoped attribute
• Inline styles are prohibited
• Directly using Element Plus class names as selectors (e.g., .el-input) is prohibited

State Management Standards

• Global state must be managed using Pinia store
• Use computed properties to derive state, avoiding method calls
• Actions in the store must use async/await for handling asynchronous operations
• Prefer using props/emit in components to avoid overusing global state

TypeScript Standards

• Explicit type declarations are mandatory
• The use of the any type is prohibited
• Interfaces and type definitions should use PascalCase
• Prefer using interface over type

Project Structure Standards

src/
├── api/        # API requests
├── assets/     # Static resources
├── components/ # Components
├── router/     # Routing
├── stores/     # Pinia stores
├── utils/      # Utility functions
└── views/      # Pages

Prohibitions

• The use of jQuery or direct DOM manipulation is prohibited
• Complex expressions in templates are prohibited
• Direct modification of object properties in props is prohibited
• The use of global variables in components is prohibited
• Using specific framework class names as selectors is prohibited

Special Considerations

1. Retain the original !important keyword in CSS.
2. Retain original code comments and console.log.
3. Preserve full-width double quotes in code: In all code modifications (such as comments, text content, etc.), strictly maintain full-width double quotes (“”) and do not convert existing full-width quotes to half-width quotes ("").
4. Be mindful of performance when using watch: Avoid unnecessary updates and re-renders.
5. Auto-import is configured in vite.config.js: All Vue APIs (including ref, onMounted, watch, nextTick, etc.) are automatically imported and do not need to be manually imported.