noVueDeprecatedVOnNativeModifier (HTML)

Language HTML

Summary

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

How to configure

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

Description

Disallow the .native modifier on Vue’s v-on directive.

In Vue 2, the .native modifier made v-on listen to an event on the root element of a component, instead of an event sent by the component itself. Vue 3 removed this modifier. A listener for an event that the component does not declare in its emits option is now added to the component’s root element automatically, so the modifier is no longer needed.

Examples

Invalid

1
<MyComponent v-on:click.native="onClick" />

code-block.vue:1:24 lint/nursery/noVueDeprecatedVOnNativeModifier ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The .native modifier on v-on is deprecated.
  
  > 1 │ <MyComponent v-on:click.native="onClick" />
      │                        ^^^^^^^
    2 │ 
  
  ℹ Vue 3 removed this modifier. Listeners for events that a component does not declare in its emits option are added to its root element automatically.
  
  ℹ Remove the .native modifier.
  
  ℹ 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.

1
<MyComponent @click.native="onClick" />

code-block.vue:1:20 lint/nursery/noVueDeprecatedVOnNativeModifier ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The .native modifier on v-on is deprecated.
  
  > 1 │ <MyComponent @click.native="onClick" />
      │                    ^^^^^^^
    2 │ 
  
  ℹ Vue 3 removed this modifier. Listeners for events that a component does not declare in its emits option are added to its root element automatically.
  
  ℹ Remove the .native modifier.
  
  ℹ 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

1
<MyComponent v-on:click="onClick" />
2
<MyComponent @click="onClick" />
3
<input @keyup.enter="submit" />

References

Vue 3 migration guide: v-on.native modifier removed