← Back to rules

vue/valid-next-tick Correctness

🛠️ An auto-fix is available for this rule.

What it does

Enforce valid nextTick function calls.

Why is this bad?

nextTick is a function that takes either a callback or returns a Promise. Misuse (accessing it as a value, passing extra arguments, both awaiting and passing a callback) is almost always a bug.

Examples

Examples of incorrect code for this rule:

<script>
import { nextTick } from "vue";
export default {
  async mounted() {
    nextTick(); // missing await or callback
    this.$nextTick; // not invoked
    this.$nextTick(a, b); // too many args
    await this.$nextTick(callback); // both await and callback
  },
};
</script>

Examples of correct code for this rule:

<script>
import { nextTick } from "vue";
export default {
  async mounted() {
    await nextTick();
    this.$nextTick(callback);
    this.$nextTick().then(callback);
  },
};
</script>

How to use

To enable this rule using the config file or in the CLI, you can use:

Config (.oxlintrc.json)

{
  "plugins": ["vue"],
  "rules": {
    "vue/valid-next-tick": "error"
  }
}

Config (oxlint.config.ts)

import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["vue"],
  rules: {
    "vue/valid-next-tick": "error",
  },
});

CLI

oxlint --deny vue/valid-next-tick --vue-plugin

Version

This rule was added in vnext.

References

• Rule Source
• Open rule in Oxc Playground