Vue Rules: Directive Validity

Every rule on this page includes its purpose, prerequisites, configuration, and complete Bad/Good examples. Highlighted lines show what changes; copying an example gives you the complete source. Each rule also states its current support limits.

Rule	Examples	Purpose
`vue/valid-v-bind`	Bad · Good	Enforce valid `v-bind` directives
`vue/valid-v-else`	Bad · Good	Enforce valid `v-else` directives
`vue/valid-v-for`	Bad · Good	Enforce valid `v-for` directives
`vue/valid-v-if`	Bad · Good	Enforce valid `v-if` directives
`vue/valid-v-memo`	Bad · Good	Enforce valid `v-memo` directives
`vue/valid-v-model`	Bad · Good	Enforce valid `v-model` directives
`vue/valid-v-on`	Bad · Good	Enforce valid `v-on` directives
`vue/valid-v-show`	Bad · Good	Enforce valid `v-show` directives
`vue/valid-v-slot`	Bad · Good	Enforce valid `v-slot` directives

All rules · Rule Options · ESLint migration map · Project checks · Attributes across components

`vue/valid-v-bind`

Enforce valid v-bind directives

Bad · Good

Default severity: error
Presets: essential, happy-path, nuxt, ecosystem, opinionated
Automatic fix: None; review the suggested change
Applies to: Vue SFC templates and blocks, with script context where the rule requires it
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": {
        "vue/valid-v-bind": "error"
      }
    },
  },
});

vp run lint

Bad

The bare v-bind has no object expression, and the empty argument form has no attribute name.

<template>
  <div v-bind></div>
  <div :></div>
</template>

Good

Provide an attribute and expression, bind an object, or use Vue 3.4+ same-name shorthand such as :loading.

<template>
  <div :class="panelClass"></div>
  <div v-bind="{ class: panelClass }"></div>
  <div :loading></div>
</template>

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

Implementation · All rules

`vue/valid-v-else`

Enforce valid v-else directives

Bad · Good

Default severity: error
Presets: essential, happy-path, nuxt, ecosystem, opinionated
Automatic fix: Available for supported findings
Applies to: Vue SFC templates and blocks, with script context where the rule requires it
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": {
        "vue/valid-v-else": "error"
      }
    },
  },
});

vp run lint

Bad

The examples give v-else an expression, combine it with v-if, or omit its adjacent preceding conditional branch.

<template>
  <div v-else="ready"></div>
  <div v-else v-if="ready"></div>
  <div v-else></div>
</template>

Good

Place bare v-else immediately after the corresponding v-if branch.

<template>
  <div v-if="ready"></div>
  <div v-else></div>
</template>

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

Implementation · All rules

`vue/valid-v-for`

Enforce valid v-for directives

Bad · Good

Configuration (Vite+)

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

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

vp run lint

Bad

The loops omit their iteration expression or add an unsupported .stop modifier.

<template>
  <div v-for></div>
  <div v-for=""></div>
  <div v-for.stop="item in items"></div>
</template>

Good

Use item in items or (item, index) of items with a complete iteration expression and the shown keys.

<template>
  <div v-for="item in items" :key="item.id"></div>
  <div v-for="(item, index) of items" :key="index"></div>
</template>

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

Implementation · All rules

`vue/valid-v-if`

Enforce valid v-if directives

Bad · Good

Configuration (Vite+)

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

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

vp run lint

Bad

The conditions omit an expression or combine v-if with an else directive on the same node.

<template>
  <div v-if></div>
  <div v-if=""></div>
  <div v-if="ready" v-else></div>
</template>

Good

Each v-if has a nonempty condition such as ready or count > 0, without an incompatible else directive.

<template>
  <div v-if="ready"></div>
  <div v-if="count > 0"></div>
</template>

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

Implementation · All rules

`vue/valid-v-memo`

Enforce valid v-memo directives

Bad · Good

Configuration (Vite+)

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

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

vp run lint

Bad

Bare v-memo gives Vue no dependency expression for deciding when to reuse the subtree.

<template>
  <div v-memo></div>
</template>

Good

v-memo="[valueA, valueB]" supplies the dependency array used for memoization.

<template>
  <div v-memo="[valueA, valueB]">{{ label }}</div>
</template>

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

Implementation · All rules

`vue/valid-v-model`

Enforce valid v-model directives

Bad · Good

Configuration (Vite+)

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

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

vp run lint

Bad

A native <div> cannot use v-model as a form control, and a bare input directive has no writable target expression.

<template>
  <div v-model="value"></div>
  <input v-model />
</template>

Good

Bind the input, select, textarea, or custom component to the shown writable variables.

<template>
  <input v-model="value" />
  <select v-model="selected"></select>
  <textarea v-model="text"></textarea>
  <MyInput v-model="value" />
</template>

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

Implementation · All rules

`vue/valid-v-on`

Enforce valid v-on directives

Bad · Good

Configuration (Vite+)

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

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

vp run lint

Bad

The listener forms omit an event argument or their required handler/object expression.

<template>
  <div v-on></div>
  <div @></div>
  <div @click></div>
</template>

Good

Use an event with its handler, or pass a listener object to argument-free v-on.

<template>
  <div @click="handleClick"></div>
  <div v-on="{ click: handleClick }"></div>
</template>

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

Implementation · All rules

`vue/valid-v-show`

Enforce valid v-show directives

Bad · Good

Configuration (Vite+)

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

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

vp run lint

Bad

v-show lacks its visibility expression or is placed on a <template> that has no DOM element whose display can be changed.

<template>
  <div v-show></div>
  <template v-show="ready"><div></div></template>
</template>

Good

Apply the visibility expression to a rendered element such as <div>.

<template>
  <div v-show="ready"></div>
  <div v-show="count > 0"></div>
</template>

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

Implementation · All rules

`vue/valid-v-slot`

Enforce valid v-slot directives

Bad · Good

Configuration (Vite+)

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

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

vp run lint

Bad

The slot directive is on a native <div> or conflicts with other default/named slot declarations.

<template>
  <div v-slot:header></div>
  <MyComponent v-slot v-slot:header />
  <template v-slot:header v-slot:footer />
</template>

Good

Declare a component's default slot on that component, or its named slot on a child <template #header>.

<template>
  <MyComponent v-slot="{ item }">{{ item }}</MyComponent>
  <MyComponent>
    <template #header>Header</template>
  </MyComponent>
</template>

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

Implementation · All rules