vue/no-async-in-computed-properties Correctness
What it does
Disallow asynchronous actions in computed properties.
Why is this bad?
Asynchronous actions inside computed properties may lead to an unexpected behavior. A computed property's value should be a synchronous function of its dependencies.
Examples
Examples of incorrect code for this rule:
vue
<script>
export default {
computed: {
pro() {
return Promise.all([new Promise((resolve, reject) => {})]);
},
foo: async function () {
return await someFunc();
},
bar() {
return fetch(url).then((response) => {});
},
tim() {
setTimeout(() => {}, 0);
},
inst() {
return new Promise((resolve, reject) => {});
},
},
};
</script>Examples of correct code for this rule:
vue
<script>
export default {
computed: {
foo() {
return this.bar;
},
},
};
</script>Configuration
ignoredObjectNames
type: string[]
default: []
Names of identifiers whose member-call chains (.then / .catch / .finally) should be ignored. Useful for libraries like Zod where .catch(default) is a builder API, not a Promise method.
How to use
To enable this rule using the config file or in the CLI, you can use:
json
{
"plugins": ["vue"],
"rules": {
"vue/no-async-in-computed-properties": "error"
}
}ts
import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["vue"],
rules: {
"vue/no-async-in-computed-properties": "error",
},
});bash
oxlint --deny vue/no-async-in-computed-properties --vue-pluginVersion
This rule was added in vnext.