Description
Please describe what the rule should do:
This rule should suggest using the new vapor attribute on <script setup> blocks in Vue 3.6+.
Vapor Mode is a new feature introduced in Vue 3.6 (currently in alpha), and this rule helps developers start adopting it early by recommending vapor where it's appropriate. The behavior of components stays the same, but performance can be improved.
The rule should detect components using <script setup> and suggest adding the vapor attribute when possible.
What category should the rule belong to?
[ ] Enforces code style (layout)
[ ] Warns about a potential error (problem)
[x] Suggests an alternate way of doing something (suggestion)
[ ] Other (please specify:)
Provide 2-3 code examples that this rule should warn about:
<!-- ❌ This component could use vapor mode, but doesn't -->
<script setup>
defineProps(['msg'])
</script>
<template>
<div>{{ msg }}</div>
</template><!-- ✅ This component uses vapor mode correctly -->
<script setup vapor>
defineProps(['msg'])
</script>
<template>
<div>{{ msg }}</div>
</template>Additional context
Vapor Mode was introduced in Vue 3.6, which is currently in alpha.
This rule will become more important once Vue 3.6 is officially released, helping developers adopt the new mode and benefit from improved performance in eligible components.