JS.VUE.VALID.NEXT.TICK

• Some problems reported by this rule are manually fixable by editor suggestions (https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).

Rule Details

Calling Vue.nextTick or vm.$nextTick without passing a callback and without awaiting the returned Promise is likely a mistake (probably a missing await).

{'vue/valid-next-tick': ['error']}

<script>
import { nextTick as nt } from 'vue';

export default {
  async mounted() {
    /* BAD: no callback function or awaited Promise */
    nt();
    Vue.nextTick();
    this.$nextTick();

    /* BAD: too many parameters */
    nt(callback, anotherCallback);
    Vue.nextTick(callback, anotherCallback);
    this.$nextTick(callback, anotherCallback);

    /* BAD: no function call */
    nt.then(callback);
    Vue.nextTick.then(callback);
    this.$nextTick.then(callback);
    await nt;
    await Vue.nextTick;
    await this.$nextTick;

    /* BAD: both callback function and awaited Promise */
    nt(callback).then(anotherCallback);
    Vue.nextTick(callback).then(anotherCallback);
    this.$nextTick(callback).then(anotherCallback);
    await nt(callback);
    await Vue.nextTick(callback);
    await this.$nextTick(callback);

    /* GOOD */
    await nt();
    await Vue.nextTick();
    await this.$nextTick();

    /* GOOD */
    nt().then(callback);
    Vue.nextTick().then(callback);
    this.$nextTick().then(callback);

    /* GOOD */
    nt(callback);
    Vue.nextTick(callback);
    this.$nextTick(callback);
  }
}
</script>

Options

Nothing.

Further Reading

• Vue.nextTick API in Vue 2 (https://v2.vuejs.org/v2/api/#Vue-nextTick)
• vm.$nextTick API in Vue 2 (https://v2.vuejs.org/v2/api/#vm-nextTick)
• Global API Treeshaking (https://v3-migration.vuejs.org/breaking-changes/global-api-treeshaking.html)
• Global nextTick API in Vue 3 (https://v3.vuejs.org/api/global-api.html#nexttick)
• Instance $nextTick API in Vue 3 (https://v3.vuejs.org/api/instance-methods.html#nexttick)