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.