Organizing Vue Components with a Modular Architecture

{
  "title": "Organizing Vue Components with a Modular Architecture",
  "description": "Explore methods to structure Vue components using a modular approach for better scalability and team collaboration.",
  "category": "Vue Cursor Rules",
  "rules": [
    {
      "name": "Modular Component Structure",
      "description": "Ensure that Vue components are organized into modules based on feature or functionality to enhance scalability and maintainability.",
      "pattern": "src/modules/*",
      "severity": "warning",
      "message": "Consider organizing components into feature-based modules to improve project structure and scalability."
    },
    {
      "name": "Single Responsibility Principle",
      "description": "Each component should have a single responsibility, making it easier to understand, test, and maintain.",
      "pattern": "src/components/*",
      "severity": "error",
      "message": "This component appears to handle multiple responsibilities. Refactor it to adhere to the Single Responsibility Principle."
    },
    {
      "name": "Use of Scoped Styles",
      "description": "Apply scoped styles within components to prevent CSS from leaking into other components.",
      "pattern": "src/components/*.vue",
      "severity": "warning",
      "message": "Consider using scoped styles to encapsulate component-specific CSS and avoid unintended style leakage."
    },
    {
      "name": "Component Naming Convention",
      "description": "Follow a consistent naming convention for components to distinguish between local and global components.",
      "pattern": "src/components/*",
      "severity": "warning",
      "message": "Ensure component names are descriptive and follow the established naming conventions for clarity and consistency."
    },
    {
      "name": "Centralized State Management",
      "description": "Utilize a centralized state management solution, such as Vuex, to handle shared data seamlessly across various modules.",
      "pattern": "src/store/*",
      "severity": "info",
      "message": "Implement centralized state management to maintain a consistent and coherent application state."
    },
    {
      "name": "Component Documentation",
      "description": "Document components with clear explanations of their purpose, props, events, and usage examples to facilitate onboarding and knowledge transfer.",
      "pattern": "src/components/*",
      "severity": "info",
      "message": "Ensure this component is well-documented to aid in maintainability and team collaboration."
    },
    {
      "name": "Testing Framework Implementation",
      "description": "Establish a robust testing framework to ensure all modules are functioning as expected, aiming for at least 80% test coverage on critical components.",
      "pattern": "tests/unit/*",
      "severity": "error",
      "message": "Implement comprehensive unit tests to validate component functionality and maintain application reliability."
    },
    {
      "name": "Presentational and Container Components",
      "description": "Separate components into presentational and container categories to simplify development, promote reusability, and enhance maintainability.",
      "pattern": "src/components/*",
      "severity": "warning",
      "message": "Consider separating this component into presentational and container components to adhere to best practices."
    },
    {
      "name": "Use of Slots for Reusability",
      "description": "Leverage slots to create flexible components that can accept dynamic content, enhancing reusability and customization.",
      "pattern": "src/components/*.vue",
      "severity": "info",
      "message": "Utilize slots to allow for dynamic content insertion and improve component flexibility."
    },
    {
      "name": "Functional Components for Performance",
      "description": "Use functional components for purely presentational parts to improve rendering performance by eliminating unnecessary lifecycle hooks.",
      "pattern": "src/components/*.vue",
      "severity": "info",
      "message": "Consider converting this component to a functional component to enhance rendering performance."
    }
  ]
}