noVueDeprecatedListeners (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.4
Diagnostic Category: lint/nursery/noVueDeprecatedListeners
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-deprecated-dollar-listeners-api

How to configure

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

Description

Disallow the deprecated Vue $listeners API.

Vue 3 removed $listeners. Event listeners passed to a component are now part of $attrs, so code that still reads $listeners no longer receives them. Use $attrs instead when migrating a component from Vue 2.

See the Vue 3 migration guide for more information.

Examples

Invalid

1
<script>
2
export default {
3
  mounted() {
4
    console.log(this.$listeners);
5
  }
6
};
7
</script>

code-block.vue:4:22 lint/nursery/noVueDeprecatedListeners ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The Vue $listeners API is deprecated.
  
    2 │ export default {
    3 │   mounted() {
  > 4 │     console.log(this.$listeners);
      │                      ^^^^^^^^^^
    5 │   }
    6 │ };
  
  ℹ Vue 3 removed $listeners and passes event listeners to the component through $attrs instead.
  
  ℹ Use $attrs. See the Vue 3 migration guide for more information.
  
  ℹ 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
<script>
2
export default {
3
  mounted() {
4
    console.log(this.$attrs);
5
  }
6
};
7
</script>