useVueValidNextTick (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/useVueValidNextTick
This rule has an unsafe fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/valid-next-tick

How to configure

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

Description

Enforce valid calls to Vue’s nextTick function.

Vue updates the page some time after your data changes. nextTick lets you wait until that update is done, either by passing it a callback function or by awaiting the Promise it returns.

This rule reports uses of nextTick that don’t wait for the update:

nextTick is used without being called, such as nextTick.then(callback) or await nextTick.
nextTick() is called without a callback, and the returned Promise isn’t awaited, returned, assigned or chained with .then().
nextTick is called with more than one argument. It only accepts one callback.
nextTick is called with a callback, and the returned Promise is also awaited or chained with .then(). Use one of the two, not both.

This applies to nextTick imported from vue, Vue.nextTick, and this.$nextTick.

Examples

Invalid

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

4
nextTick();
5
</script>

code-block.vue:4:1 lint/nursery/useVueValidNextTick  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The Promise returned by nextTick() is ignored.
  
    2 │ import { nextTick } from "vue";
    3 │ 
  > 4 │ nextTick();
      │ ^^^^^^^^
    5 │ </script>
    6 │ 
  
  ℹ Code after this call doesn't wait for Vue to update the page, so this call has no effect.
  
  ℹ Await the Promise, or pass a callback function to nextTick.
  
  ℹ 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.
  
  ℹ Unsafe fix: Add await.
  
    4 │ await·nextTick();
      │ ++++++

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

4
nextTick.then(() => {});
5
</script>

code-block.vue:4:1 lint/nursery/useVueValidNextTick  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ nextTick is used without being called.
  
    2 │ import { nextTick } from "vue";
    3 │ 
  > 4 │ nextTick.then(() => {});
      │ ^^^^^^^^
    5 │ </script>
    6 │ 
  
  ℹ nextTick is a function. It only waits for Vue to update the page when it's called.
  
  ℹ Call nextTick().
  
  ℹ 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.
  
  ℹ Unsafe fix: Call nextTick.
  
    2 2 │   import { nextTick } from "vue";
    3 3 │   
    4   │ - nextTick.then(()·=>·{});
      4 │ + nextTick().then(()·=>·{});
    5 5 │   </script>
    6 6 │

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

4
nextTick(callback, anotherCallback);
5
</script>

code-block.vue:4:1 lint/nursery/useVueValidNextTick ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ nextTick is called with more than one argument.
  
    2 │ import { nextTick } from "vue";
    3 │ 
  > 4 │ nextTick(callback, anotherCallback);
      │ ^^^^^^^^
    5 │ </script>
    6 │ 
  
  ℹ nextTick accepts a single callback function. The other arguments are ignored.
  
  ℹ Pass at most one callback function to nextTick.
  
  ℹ 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
<script>
2
export default {
3
  async mounted() {
4
    await this.$nextTick(callback);
5
  },
6
};
7
</script>

code-block.vue:4:11 lint/nursery/useVueValidNextTick ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ nextTick is called with a callback function, and the Promise it returns is also used.
  
    2 │ export default {
    3 │   async mounted() {
  > 4 │     await this.$nextTick(callback);
      │           ^^^^^^^^^^^^^^
    5 │   },
    6 │ };
  
  ℹ Using both splits the code that runs after Vue updates the page into two places.
  
  ℹ Either await the Promise, or pass a callback function to nextTick.
  
  ℹ 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 { nextTick } from "vue";
3

4
export default {
5
  async mounted() {
6
    await nextTick();
7
    nextTick().then(callback);
8
    nextTick(callback);
9
    await this.$nextTick();
10
    promise.then(nextTick);
11
  },
12
};
13
</script>