eslint-plugin-vue icon indicating copy to clipboard operation
eslint-plugin-vue copied to clipboard

Rule proposal: vue/prefer-vapor-mode

Open hadarziv-army opened this issue 5 months ago • 1 comments

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.

hadarziv-army avatar Jul 12 '25 14:07 hadarziv-army