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. Do not change full-width quotes (“”) in text and comments to half-width quotes ("")