`petite-vue/valid-v-effect`

Require v-effect to have a non-empty expression

Default severity: error
Presets: none
Automatic fix: None; review the suggested change
Applies to: HTML documents detected as petite-vue; ordinary Vue SFCs are outside this rule's scope.
Options: No rule-specific options. Severity and preset selection are configurable.

Configuration (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  lint: {
    vize: {
      "preset": "incremental",
      "rules": {
        "petite-vue/valid-v-effect": "error"
      }
    },
  },
});

vp run lint

Bad

Each v-effect has no executable expression: its value is missing, empty, or only whitespace.

<!doctype html>
<html><body>
<div v-effect></div>
<div v-effect=""></div>
<div v-effect="   "></div>
<script src="https://unpkg.com/petite-vue" init></script>
</body></html>

Good

Both v-effect values contain an expression: one updates el.textContent, and the other increments count. This rule checks for a nonempty expression, not the effect’s business logic.

<!doctype html>
<html><body>
<div v-effect="el.textContent = count"></div>
<div v-effect="count++"></div>
<script src="https://unpkg.com/petite-vue" init></script>
</body></html>

Good avoids this rule's finding under the configuration above; other rules may still report diagnostics.

Implementation · All rules