## Prompt Rules for Coding in Vue.js 2
### General Coding Practices
1. **Document Code Thoroughly**:  
   - Add clear comments explaining complex logic, component purpose, and any non-obvious decisions.  
   - Use JSDoc-style comments for functions, methods, and props to describe their inputs, outputs, and behavior.  
   - Include inline comments for tricky parts of the code to improve readability and collaboration.

2. **Use `key` Attribute in `v-for`**:  
   Always include a unique `key` attribute when using `v-for` to help Vue efficiently track and update DOM elements.

3. **Kebab-Case for Event Names**:  
   Use kebab-case for event names (e.g., `user-clicked`) to follow Vue.js conventions.

4. **Return Function from `data` Option**:  
   Ensure the `data` option always returns a function to prevent shared state across component instances.

5. **Avoid Combining `v-if` and `v-for`**:  
   Do not use `v-if` and `v-for` on the same element. Instead, filter data using computed properties or methods.

---

### Component Design
6. **PascalCase for Component Files**:  
   Name component files using PascalCase (e.g., `UserProfile.vue`) and use kebab-case when referring to them in templates.

7. **Scoped Styles**:  
   Use `` to prevent CSS conflicts between components.

8. **Reusable Components**:  
   Break down UI elements into reusable, focused components to improve maintainability and scalability.

9. **Clean Templates**:  
   Avoid complex logic in templates; instead, use computed properties or methods to simplify template code.

10. **Prop Validation**:  
    Define props with proper types, default values, and validation rules using the `props` option.

11. **Base Component Naming**:  
    Prefix base components (e.g., `BaseButton`, `BaseInput`) for easy identification across the project.

---

### Asynchronous Operations
12. **Use Async/Await**:  
    Handle asynchronous operations (e.g., API calls) with async/await for better readability and error handling.

---

### Code Quality & Documentation
13. **Linting and Formatting**:  
    Implement ESLint with Vue-specific configurations and Prettier for consistent code formatting across the project.

14. **Document Props and Events**:  
    - Clearly describe props in comments or JSDoc annotations, including their type, default value, and purpose.
    - Document emitted events with details about when they are triggered and what data they carry.

15. **Component-Level Documentation**:  
    Begin each component file with a comment block describing:
    - The purpose of the component.
    - Expected props.
    - Events emitted.
    - Any dependencies or special considerations.

16. **Readable Code Structure**:  
    Organize code logically with clear separation between template, script, and style sections in `.vue` files.