# vue/valid-next-tick

enforce valid nextTick function calls

  • ⚙️ This rule is included in all of "plugin:vue/vue3-essential", "plugin:vue/essential", "plugin:vue/vue3-strongly-recommended", "plugin:vue/strongly-recommended", "plugin:vue/vue3-recommended" and "plugin:vue/recommended".
  • 🔧 The --fix option on the command line (opens new window) can automatically fix some of the problems reported by this rule.

# 📖 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).

<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>
Now loading...

# 🔧 Options

Nothing.

# 📚 Further Reading

# 🚀 Version

This rule was introduced in eslint-plugin-vue v7.5.0

# 🔍 Implementation

Last Updated: 10/20/2021, 5:14:26 AM