noVueAsyncComputed (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.8
Diagnostic Category: lint/nursery/noVueAsyncComputed
This rule doesn’t have a fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- vue
Sources:
- Inspired from vue/no-async-in-computed-properties

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noVueAsyncComputed": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow asynchronous code in Vue computed properties.

Vue calls the function of a computed property and uses the value it returns right away. Asynchronous code finishes later, so its result never becomes the value of the computed property. An async function returns a Promise instead of the value you expect, and code that runs later, like a setTimeout() callback, can’t change what was already returned.

This rule checks the computed properties declared in the computed option of a component, and the functions passed to computed() from vue. It reports:

async functions and the await keyword;
new Promise(), and calls to Promise functions such as Promise.all() and Promise.resolve();
calls to the then(), catch(), and finally() methods of any object;
setTimeout(), setInterval(), setImmediate(), and requestAnimationFrame();
nextTick() from vue, Vue.nextTick(), and this.$nextTick().

Functions defined inside a computed property aren’t checked, because they don’t run when Vue computes the value.

If you need a value that is loaded asynchronously, store it in a ref() or in data, update it from a watcher or a method, and read it from the computed property. You can also use computedAsync from VueUse.

Examples

Invalid

1
<script>
2
export default {
3
  computed: {
4
    async user() {
5
      return fetchUser(this.userId);
6
    },
7
  },
8
};
9
</script>

code-block.vue:4:5 lint/nursery/noVueAsyncComputed ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This computed property is an async function, so it returns a Promise instead of a value.
  
    2 │ export default {
    3 │   computed: {
  > 4 │     async user() {
      │     ^^^^^
    5 │       return fetchUser(this.userId);
    6 │     },
  
  ℹ Vue uses the value that a computed property returns right away. Asynchronous code finishes later, so its result never becomes the value of the computed property.
  
  ℹ Store the result in a ref() or in data from a watcher or a method, and read it from the computed property instead.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
<script>
2
export default {
3
  computed: {
4
    user() {
5
      return fetchUser(this.userId).then((response) => response.data);
6
    },
7
  },
8
};
9
</script>

code-block.vue:5:14 lint/nursery/noVueAsyncComputed ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This computed property runs asynchronous code.
  
    3 │   computed: {
    4 │     user() {
  > 5 │       return fetchUser(this.userId).then((response) => response.data);
      │              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    6 │     },
    7 │   },
  
  ℹ Vue uses the value that a computed property returns right away. Asynchronous code finishes later, so its result never becomes the value of the computed property.
  
  ℹ Store the result in a ref() or in data from a watcher or a method, and read it from the computed property instead.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
import { computed } from "vue";
2

3
const doubled = computed(() => {
4
  setTimeout(() => console.log(count.value), 100);
5
  return count.value * 2;
6
});

code-block.js:4:3 lint/nursery/noVueAsyncComputed ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This computed property schedules code to run later.
  
    3 │ const doubled = computed(() => {
  > 4 │   setTimeout(() => console.log(count.value), 100);
      │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    5 │   return count.value * 2;
    6 │ });
  
  ℹ Vue uses the value that a computed property returns right away. Asynchronous code finishes later, so its result never becomes the value of the computed property.
  
  ℹ Store the result in a ref() or in data from a watcher or a method, and read it from the computed property instead.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
<script>
2
export default {
3
  computed: {
4
    fullName() {
5
      return `${this.firstName} ${this.lastName}`;
6
    },
7
    loader() {
8
      return async () => fetchUser(this.userId);
9
    },
10
  },
11
};
12
</script>

Options

`ignoreObjects`

Default: []

Names of objects whose then(), catch(), and finally() methods aren’t reported. Some libraries use these method names for code that isn’t asynchronous. For example, catch() in the Zod validation library sets a fallback value.

The name is the first variable of the chain of calls and property accesses, so "z" matches z.number().catch(0) and z.object({}).shape.catch(0).

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noVueAsyncComputed": {
6
          "level": "on",
7
          "options": {
8
            "ignoreObjects": [
9
              "z"
10
            ]
11
          }
12
        }
13
      }
14
    }
15
  }
16
}

Invalid

1
import { computed } from "vue";
2

3
const age = computed(() => schema.number().catch(0));

code-block.js:3:28 lint/nursery/noVueAsyncComputed ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This computed property runs asynchronous code.
  
    1 │ import { computed } from "vue";
    2 │ 
  > 3 │ const age = computed(() => schema.number().catch(0));
      │                            ^^^^^^^^^^^^^^^^^^^^^^^^
    4 │ 
  
  ℹ Vue uses the value that a computed property returns right away. Asynchronous code finishes later, so its result never becomes the value of the computed property.
  
  ℹ Store the result in a ref() or in data from a watcher or a method, and read it from the computed property instead.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
import { computed } from "vue";
2

3
const age = computed(() => z.number().catch(0));

noVueAsyncComputed (JavaScript)

Summary

How to configure

Description

Examples

Invalid

Valid

Options

ignoreObjects

Invalid

Valid

Related links

`ignoreObjects`