noVueDeprecatedEventsApi (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/noVueDeprecatedEventsApi
This rule doesn’t have a fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- vue
Sources:
- Inspired from vue/no-deprecated-events-api

How to configure

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

Description

Disallow the Vue $on, $off, and $once instance methods.

Vue 3 removed the $on, $off, and $once methods from component instances, so a component can no longer listen to its own events with them. Calling one of these methods throws an error, because the method doesn’t exist.

To react to an event that a child component emits, listen to it with v-on (or @) in the parent’s template. To send events between components that aren’t parent and child, use a small event library such as mitt or tiny-emitter.

This rule checks calls on this, and on variables declared with const vm = this, inside the options object of a component: the default export of a .vue file, or the object passed to defineComponent() or createApp(). Calls written as this.$on?.() are allowed, because they only run when the method exists.

See the Vue 3 migration guide for more information.

Examples

Invalid

1
<script>
2
export default {
3
  mounted() {
4
    this.$on("start", () => {
5
      console.log("start");
6
    });
7
  },
8
};
9
</script>

code-block.vue:4:10 lint/nursery/noVueDeprecatedEventsApi ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The Vue $on instance method was removed in Vue 3.
  
    2 │ export default {
    3 │   mounted() {
  > 4 │     this.$on("start", () => {
      │          ^^^
    5 │       console.log("start");
    6 │     });
  
  ℹ Component instances no longer have this method, so calling it throws an error.
  
  ℹ Listen to a child component's events with v-on in the parent's template, or use an event library such as mitt. 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.

1
import { defineComponent } from "vue";
2

3
export default defineComponent({
4
  beforeUnmount() {
5
    this.$off("start");
6
  },
7
});

code-block.js:5:10 lint/nursery/noVueDeprecatedEventsApi ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The Vue $off instance method was removed in Vue 3.
  
    3 │ export default defineComponent({
    4 │   beforeUnmount() {
  > 5 │     this.$off("start");
      │          ^^^^
    6 │   },
    7 │ });
  
  ℹ Component instances no longer have this method, so calling it throws an error.
  
  ℹ Listen to a child component's events with v-on in the parent's template, or use an event library such as mitt. 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
import mitt from "mitt";
3

4
const emitter = mitt();
5

6
export default {
7
  mounted() {
8
    emitter.on("start", () => {
9
      console.log("start");
10
    });
11
    this.$emit("ready");
12
  },
13
};
14
</script>