Implementing Vapor Mode for Enhanced Performance in Vue Applications

{
  "title": "Implementing Vapor Mode for Enhanced Performance in Vue Applications",
  "description": "Guidelines on utilizing Vue's Vapor Mode to eliminate Virtual DOM overhead, resulting in faster rendering and improved application performance.",
  "category": "Vue Cursor Rules",
  "rules": [
    {
      "id": "vue-vapor-mode-usage",
      "description": "Ensure that components intended for Vapor Mode are named with the `.vapor` suffix to enable direct DOM manipulation and bypass the Virtual DOM.",
      "severity": "error",
      "pattern": {
        "type": "file",
        "pattern": ".*\\.vue$"
      },
      "conditions": [
        {
          "type": "not",
          "pattern": ".*\\.vapor\\.vue$"
        }
      ],
      "message": "Components utilizing Vapor Mode should have a `.vapor.vue` filename suffix."
    },
    {
      "id": "vue-vapor-mode-imports",
      "description": "Import Composition API functions from 'vue/vapor' in Vapor Mode components to leverage direct DOM manipulation capabilities.",
      "severity": "error",
      "pattern": {
        "type": "import",
        "module": "vue"
      },
      "conditions": [
        {
          "type": "file",
          "pattern": ".*\\.vapor\\.vue$"
        }
      ],
      "message": "In Vapor Mode components, import Composition API functions from 'vue/vapor' instead of 'vue'."
    },
    {
      "id": "vue-vapor-mode-setup",
      "description": "Use the `<script setup>` syntax in Vapor Mode components to optimize performance and maintain compatibility.",
      "severity": "error",
      "pattern": {
        "type": "script",
        "pattern": "<script(?!\\s+setup).*?>"
      },
      "conditions": [
        {
          "type": "file",
          "pattern": ".*\\.vapor\\.vue$"
        }
      ],
      "message": "Vapor Mode components should use the `<script setup>` syntax for optimal performance."
    },
    {
      "id": "vue-vapor-mode-composition-api",
      "description": "Ensure that Vapor Mode components exclusively use the Composition API to fully benefit from direct DOM manipulation.",
      "severity": "error",
      "pattern": {
        "type": "script",
        "pattern": "export\\s+default\\s*{"
      },
      "conditions": [
        {
          "type": "file",
          "pattern": ".*\\.vapor\\.vue$"
        }
      ],
      "message": "Vapor Mode components should exclusively use the Composition API; avoid the Options API."
    },
    {
      "id": "vue-vapor-mode-directives",
      "description": "Avoid using custom directives in Vapor Mode components, as they may not be compatible with direct DOM manipulation.",
      "severity": "warning",
      "pattern": {
        "type": "directive",
        "pattern": "v-.*"
      },
      "conditions": [
        {
          "type": "file",
          "pattern": ".*\\.vapor\\.vue$"
        }
      ],
      "message": "Custom directives may not be compatible with Vapor Mode; consider alternative approaches."
    }
  ]
}