Utilizing Slots for Flexible Component Composition

{
  "title": "Utilizing Slots for Flexible Component Composition",
  "description": "Ensure Vue components utilize slots effectively to enhance flexibility and reusability.",
  "category": "Vue Cursor Rules",
  "severity": "warning",
  "rule": {
    "name": "vue-use-slots-for-flexibility",
    "description": "Encourages the use of slots in Vue components to promote flexible and reusable component structures.",
    "patterns": [
      {
        "pattern": "<template>.*<slot.*>.*</slot>.*</template>",
        "message": "Consider using slots to allow flexible content insertion and enhance component reusability."
      }
    ],
    "examples": {
      "good": [
        {
          "code": "<template>\n  <div>\n    <slot name=\"header\"></slot>\n    <main>\n      <slot></slot>\n    </main>\n    <slot name=\"footer\"></slot>\n  </div>\n</template>",
          "description": "This component uses named and default slots to allow flexible content insertion."
        }
      ],
      "bad": [
        {
          "code": "<template>\n  <div>\n    <header>{{ headerContent }}</header>\n    <main>\n      <p>{{ mainContent }}</p>\n    </main>\n    <footer>{{ footerContent }}</footer>\n  </div>\n</template>",
          "description": "This component hardcodes content, reducing flexibility and reusability."
        }
      ]
    }
  }
}