Creating Reusable Mixins for Common Functionality in Vue

{
  "title": "Creating Reusable Mixins for Common Functionality in Vue",
  "description": "Explore how to develop and implement mixins to share reusable logic across different components efficiently.",
  "category": "Vue Cursor Rules",
  "rules": [
    {
      "id": "vue-mixins-naming-convention",
      "description": "Ensure mixin methods and properties are prefixed with '$_' to prevent naming conflicts and indicate their origin.",
      "severity": "warning",
      "pattern": "methods: { /^(?!\\$_)/ }",
      "message": "Mixin methods should be prefixed with '$_' to avoid conflicts and improve readability."
    },
    {
      "id": "vue-mixins-single-responsibility",
      "description": "Each mixin should encapsulate a single, well-defined piece of functionality to maintain clarity and reusability.",
      "severity": "warning",
      "pattern": "export default { /.*methods: {.*},.*data: {.*},.*computed: {.*},.*watch: {.*},.*/ }",
      "message": "Mixins should focus on a single responsibility; consider splitting this mixin into smaller, focused mixins."
    },
    {
      "id": "vue-mixins-avoid-global-state",
      "description": "Mixins should not introduce global state to prevent unintended side effects and maintain component encapsulation.",
      "severity": "error",
      "pattern": "export default { /.*data: {.*global.*},.*/ }",
      "message": "Avoid using global state within mixins to ensure component encapsulation and predictability."
    },
    {
      "id": "vue-mixins-documentation",
      "description": "All mixins must include comprehensive documentation detailing their purpose, usage, and any dependencies.",
      "severity": "info",
      "pattern": "export default { /.*\\/\\*\\*.*\\*\\// }",
      "message": "Ensure this mixin includes documentation comments explaining its purpose and usage."
    },
    {
      "id": "vue-mixins-avoid-lifecycle-hooks",
      "description": "Avoid using lifecycle hooks within mixins to prevent unexpected behavior and maintain component control.",
      "severity": "warning",
      "pattern": "export default { /.*(created|mounted|updated|destroyed): function.*},.*/ }",
      "message": "Lifecycle hooks in mixins can lead to unpredictable behavior; consider handling lifecycle events within components."
    }
  ]
}