Creating Custom Directives for Enhanced Functionality

---
title: Creating Custom Directives for Enhanced Functionality
description: Learn how to create and implement custom directives in Vue to extend functionality without cluttering your components.
category: Vue Cursor Rules
rules:
  - id: vue-custom-directives
    description: >
      Ensure that custom directives in Vue are created to encapsulate reusable functionality, keeping component templates clean and maintainable.
    severity: warning
    triggers:
      - pattern: |
          Vue.directive\(['"`](\w+)['"`],\s*{[^}]*}\)
        captures:
          - name: directiveName
            index: 1
    checks:
      - description: >
          Verify that the custom directive '{{ directiveName }}' is used to encapsulate reusable functionality and does not introduce unnecessary complexity into component templates.
        condition: true
        action: log
  - id: vue-directive-lifecycle-hooks
    description: >
      Ensure that custom directives properly utilize Vue's lifecycle hooks to manage setup and teardown logic, preventing memory leaks and unintended behaviors.
    severity: error
    triggers:
      - pattern: |
          Vue.directive\(['"`](\w+)['"`],\s*{[^}]*}\)
        captures:
          - name: directiveName
            index: 1
    checks:
      - description: >
          Check that the custom directive '{{ directiveName }}' implements appropriate lifecycle hooks such as 'bind', 'inserted', 'update', and 'unbind' to manage setup and teardown logic.
        condition: true
        action: log
  - id: vue-directive-naming-convention
    description: >
      Enforce consistent and descriptive naming conventions for custom directives to enhance code readability and maintainability.
    severity: warning
    triggers:
      - pattern: |
          Vue.directive\(['"`](\w+)['"`],\s*{[^}]*}\)
        captures:
          - name: directiveName
            index: 1
    checks:
      - description: >
          Ensure that the custom directive '{{ directiveName }}' follows a consistent and descriptive naming convention, clearly indicating its purpose.
        condition: true
        action: log
  - id: vue-directive-parameterization
    description: >
      Encourage the use of binding values in custom directives to create dynamic and reusable functionality.
    severity: info
    triggers:
      - pattern: |
          Vue.directive\(['"`](\w+)['"`],\s*{[^}]*}\)
        captures:
          - name: directiveName
            index: 1
    checks:
      - description: >
          Verify that the custom directive '{{ directiveName }}' utilizes binding values to allow dynamic and reusable functionality.
        condition: true
        action: log
  - id: vue-directive-performance
    description: >
      Ensure that custom directives are optimized for performance by avoiding excessive DOM manipulations and implementing throttling or debouncing where necessary.
    severity: error
    triggers:
      - pattern: |
          Vue.directive\(['"`](\w+)['"`],\s*{[^}]*}\)
        captures:
          - name: directiveName
            index: 1
    checks:
      - description: >
          Check that the custom directive '{{ directiveName }}' is optimized for performance, avoiding excessive DOM manipulations and implementing throttling or debouncing where necessary.
        condition: true
        action: log