noVueUndeclaredDirectives (HTML)

Language HTML

Summary

Rule available since: v2.5.14
Diagnostic Category: lint/nursery/noVueUndeclaredDirectives
This rule doesn’t have a fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- vue

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noVueUndeclaredDirectives": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow custom Vue directives that are not declared.

Vue resolves a custom directive such as v-highlight at runtime. When nothing registers it, Vue logs a warning and the element silently loses the behavior the directive was supposed to add.

A custom directive is considered declared when any of the following registers it:

a top-level <script setup> binding named after the directive, using the camelCase form prefixed with v, such as vHighlight for v-highlight;
the component’s directives option, written either in export default, in defineComponent(...), or in defineOptions(...);
the rule’s globals option, which is how a directive registered globally with app.directive(...) is declared to Biome.

Built-in directives such as v-if are never reported. Nothing is reported either when the component’s options cannot be resolved statically, which happens when they use extends, mixins, a spread, or a default export that is not an object literal, or when a <script> block uses src="..." to load its content from another file.

Examples

Invalid

1
<template>
2
    <div v-highlight></div>
3
</template>

code-block.vue:2:10 lint/nursery/noVueUndeclaredDirectives ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The custom directive v-highlight is undeclared.
  
    1 │ <template>
  > 2 │     <div v-highlight></div>
      │          ^^^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ Declare vHighlight in <script setup>, register the directive in the component's directives option, or list it in the rule's globals option.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

A <script setup> binding declares the directive:

1
<script setup>
2
const vHighlight = {};
3
</script>
4

5
<template><div v-highlight></div></template>

So does the component’s directives option:

1
<script>
2
export default {
3
    directives: { highlight: {} },
4
};
5
</script>
6

7
<template><div v-highlight></div></template>

Options

`globals`

A list of directive names that are registered globally with app.directive(...). Write each name in kebab-case, exactly as it appears in the template without the v- prefix: click-outside for v-click-outside. Other spellings such as clickOutside or vClickOutside do not match.

Default: []

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noVueUndeclaredDirectives": {
6
          "level": "on",
7
          "options": {
8
            "globals": [
9
              "click-outside"
10
            ]
11
          }
12
        }
13
      }
14
    }
15
  }
16
}

Valid (using `globals`)

1
<template>
2
    <div v-click-outside></div>
3
</template>