noVueRestrictedVOn (HTML)

Language HTML

Caution

This rule is part of the nursery group. This means that it is experimental and the behavior can change at any time.

Summary

• Rule available since: v2.6.5
• Diagnostic Category: lint/nursery/noVueRestrictedVOn
• This rule doesn’t have a fix.
• The default severity of this rule is information.
• This rule belongs to the following domains:
  • vue
• Sources:
  • Same as vue/no-restricted-v-on

How to configure

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "noVueRestrictedVOn": "error"
      }
    }
  }
}

Description

Disallow configured event listeners in v-on directives.

Projects sometimes want to stop certain events from being listened to in templates. For example, a design system might ask developers to use a component’s own select event instead of listening to click on it, or a project might want form submissions to go through a shared component instead of @submit. This rule reports v-on directives, including the @ shorthand, that match one of the configured listeners. Without listeners configured, this rule doesn’t do anything.

Event names, modifiers, and element names are matched exactly, including their casing. Event names that are computed when the page runs, such as @[eventName], are never reported, because the rule can’t know their value.

Examples

The examples below use this configuration:

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "noVueRestrictedVOn": {
          "level": "on",
          "options": {
            "listeners": [
              {
                "event": "focusin"
              },
              {
                "event": "submit",
                "message": "Use the onSave prop instead."
              }
            ]
          }
        }
      }
    }
  }
}

Invalid

<template>
    <input @focusin="onFocus" />
</template>

code-block.vue:2:12 lint/nursery/noVueRestrictedVOn ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The event listener @focusin is restricted in this project.
  
    1 │ <template>
  > 2 │     <input @focusin="onFocus" />
      │            ^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ Remove the event listener or use an allowed alternative. If this event listener should be allowed, update the listeners 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.
  

<template>
    <form v-on:submit="save"></form>
</template>

code-block.vue:2:11 lint/nursery/noVueRestrictedVOn ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The event listener v-on:submit is restricted in this project.
  
    1 │ <template>
  > 2 │     <form v-on:submit="save"></form>
      │           ^^^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ Use the onSave prop instead.
  
  ℹ Remove the event listener or use an allowed alternative. If this event listener should be allowed, update the listeners 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

<template>
    <input @focus="onFocus" />
    <form @[eventName]="save"></form>
</template>

Options

listeners

Default: []

A list of event listeners to disallow. A v-on directive is reported when it matches every field of an entry. Each entry accepts these fields:

• event: the event name, such as "click" for @click and v-on:click. Leave it out to disallow v-on used without an event name, such as v-on="handlers".
• modifiers: a list of modifiers, such as ["prevent"]. The entry only applies when the directive uses all of these modifiers. The directive can use other modifiers too.
• element: the element or component name, such as "MyButton". The entry only applies to directives on that element.
• message: an extra message to show in the diagnostic, such as an explanation or an alternative to use.

event left out

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "noVueRestrictedVOn": {
          "level": "on",
          "options": {
            "listeners": [
              {}
            ]
          }
        }
      }
    }
  }
}

Invalid

<template>
    <div v-on="handlers"></div>
</template>

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

  ℹ The event listener v-on is restricted in this project.
  
    1 │ <template>
  > 2 │     <div v-on="handlers"></div>
      │          ^^^^
    3 │ </template>
    4 │ 
  
  ℹ Remove the event listener or use an allowed alternative. If this event listener should be allowed, update the listeners 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

<template>
    <div @click="onClick"></div>
</template>

modifiers

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "noVueRestrictedVOn": {
          "level": "on",
          "options": {
            "listeners": [
              {
                "event": "click",
                "modifiers": [
                  "prevent"
                ]
              }
            ]
          }
        }
      }
    }
  }
}

Invalid

<template>
    <a @click.stop.prevent="onClick"></a>
</template>

code-block.vue:2:8 lint/nursery/noVueRestrictedVOn ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The event listener @click.stop.prevent is restricted in this project.
  
    1 │ <template>
  > 2 │     <a @click.stop.prevent="onClick"></a>
      │        ^^^^^^^^^^^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ Remove the event listener or use an allowed alternative. If this event listener should be allowed, update the listeners 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

<template>
    <a @click="onClick"></a>
    <a @click.stop="onClick"></a>
</template>

element

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "noVueRestrictedVOn": {
          "level": "on",
          "options": {
            "listeners": [
              {
                "event": "click",
                "element": "MyButton"
              }
            ]
          }
        }
      }
    }
  }
}

Invalid

<template>
    <MyButton @click="onClick" />
</template>

code-block.vue:2:15 lint/nursery/noVueRestrictedVOn ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The event listener @click is restricted in this project.
  
    1 │ <template>
  > 2 │     <MyButton @click="onClick" />
      │               ^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ Remove the event listener or use an allowed alternative. If this event listener should be allowed, update the listeners 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

<template>
    <button @click="onClick"></button>
    <MyLink @click="onClick" />
</template>

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code (Edit this Page)
• Test Cases
• Try in the playground