noVueLifecycleAfterAwait (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.0
Diagnostic Category: lint/nursery/noVueLifecycleAfterAwait
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-lifecycle-after-await

How to configure

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

Description

Disallow registering Vue lifecycle hooks after an await in setup().

Lifecycle hooks, such as onMounted() and onUnmounted(), attach code to the component whose setup() function is currently running. When setup() pauses at an await, Vue stops tracking which component is being set up. A lifecycle hook called after that point isn’t attached to the component, so its code never runs.

This rule reports calls to these functions imported from vue that come after an await in a component’s setup() function: onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onUnmounted, and onUpdated.

A call that passes the component as the second argument is allowed, because it doesn’t depend on the component that is currently being set up.

Code inside <script setup> isn’t checked, because Vue keeps track of the component across each await there.

Examples

Invalid

1
<script>
2
import { onMounted } from "vue";
3

4
export default {
5
  async setup() {
6
    await fetchUser();
7
    onMounted(() => {});
8
  },
9
};
10
</script>

code-block.vue:7:5 lint/nursery/noVueLifecycleAfterAwait ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This lifecycle hook is registered after an await, so it never runs.
  
    5 │   async setup() {
    6 │     await fetchUser();
  > 7 │     onMounted(() => {});
      │     ^^^^^^^^^^^^^^^^^^^
    8 │   },
    9 │ };
  
  ℹ The setup() function pauses here. After this point, Vue no longer knows which component the hook belongs to.
  
    4 │ export default {
    5 │   async setup() {
  > 6 │     await fetchUser();
      │     ^^^^^
    7 │     onMounted(() => {});
    8 │   },
  
  ℹ Call the lifecycle hook before the first await in setup().
  
  ℹ 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 { onMounted } from "vue";
3

4
export default {
5
  async setup() {
6
    onMounted(() => {});
7
    await fetchUser();
8
  },
9
};
10
</script>