Skip to content

vue/valid-next-tick

enforce valid nextTick function calls

  • ⚙️ This rule is included in all of "plugin:vue/essential", *.configs["flat/essential"], "plugin:vue/vue2-essential", *.configs["flat/vue2-essential"], "plugin:vue/strongly-recommended", *.configs["flat/strongly-recommended"], "plugin:vue/vue2-strongly-recommended", *.configs["flat/vue2-strongly-recommended"], "plugin:vue/recommended", *.configs["flat/recommended"], "plugin:vue/vue2-recommended" and *.configs["flat/vue2-recommended"].
  • 🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.
  • 💡 Some problems reported by this rule are manually fixable by editor 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).

<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