no-restricted-v-on.md

pageClass	sidebarDepth	title	description	since
rule-details	0	vue/no-restricted-v-on	disallow specific argument in `v-on`	v9.21.0

vue/no-restricted-v-on

disallow specific argument in v-on

📖 Rule Details

This rule allows you to specify v-on argument names that you don't want to use in your application.

🔧 Options

This rule takes a list of strings, where each string is a argument name or pattern to be restricted:

{
  "vue/no-restricted-v-on": ["error", "foo", "/^bar/"]
}

<template>
  <!-- ✓ GOOD -->
  <div v-on:click="x" />
  <div @tap="x" />

  <!-- ✗ BAD -->
  <div v-on:foo="x" />
  <div @bar-baz="x" />
</template>

Alternatively, the rule also accepts objects.

{
  "vue/no-restricted-v-on": [
    "error",
    {
      "argument": "foo",
      "message": "Use \"v-on:x\" instead."
    },
    {
      "argument": "bar",
      "message": "\"@bar\" is deprecated."
    }
  ]
}

The following properties can be specified for the object.

• argument ... Specify the argument name or pattern or null. If null is specified, it matches v-on=.
• modifiers ... Specifies an array of the modifier names. If specified, it will only be reported if the specified modifier is used.
• element ... Specify the element name or pattern. If specified, it will only be reported if used on the specified element.
• message ... Specify an optional custom message.

{ "argument": "foo", "modifiers": ["prevent"] }

<template>
  <!-- ✓ GOOD -->
  <div @foo="x" />

  <!-- ✗ BAD -->
  <div @foo.prevent="x" />
</template>

{ "argument": "foo", "element": "MyButton" }

<template>
  <!-- ✓ GOOD -->
  <CoolButton @foo="x" />

  <!-- ✗ BAD -->
  <MyButton @foo="x" />
</template>

👫 Related Rules

• vue/no-restricted-static-attribute
• vue/no-restricted-v-bind

🚀 Version

This rule was introduced in eslint-plugin-vue v9.21.0

🔍 Implementation

• Rule source
• Test source