Skip to content

vue/next-tick-style

enforce Promise or callback style in nextTick

  • 🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

📖 Rule Details

This rule enforces whether the callback version or Promise version (which was introduced in Vue v2.1.0) should be used in Vue.nextTick and this.$nextTick.

<script> import { nextTick as nt } from 'vue'; export default { async mounted() { /* ✓ GOOD */ nt().then(() => callback()); await nt(); callback(); Vue.nextTick().then(() => callback()); await Vue.nextTick(); callback(); this.$nextTick().then(() => callback()); await this.$nextTick(); callback(); /* ✗ BAD */ nt(() => callback()); nt(callback); Vue.nextTick(() => callback()); Vue.nextTick(callback); this.$nextTick(() => callback()); this.$nextTick(callback); } } </script>
Now loading...

🔧 Options

Default is set to promise.

json
{
  "vue/next-tick-style": ["error", "promise" | "callback"]
}
  • "promise" (default) ... requires using the promise version.
  • "callback" ... requires using the callback version. Use this if you use a Vue version below v2.1.0.

"callback"

<script> import { nextTick as nt } from 'vue'; export default { async mounted() { /* ✓ GOOD */ nt(() => callback()); nt(callback); Vue.nextTick(() => callback()); Vue.nextTick(callback); this.$nextTick(() => callback()); this.$nextTick(callback); /* ✗ BAD */ nt().then(() => callback()); await nt(); callback(); Vue.nextTick().then(() => callback()); await Vue.nextTick(); callback(); this.$nextTick().then(() => callback()); await this.$nextTick(); callback(); } } </script>
Now loading...

📚 Further Reading

🚀 Version

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

🔍 Implementation