noVueRestrictedCallAfterAwait (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/noVueRestrictedCallAfterAwait
This rule doesn’t have a fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/no-restricted-call-after-await

How to configure

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

Description

Disallow calling configured functions after an await in setup().

Some functions, such as useI18n() from vue-i18n, need to know which component is being set up. Vue only keeps track of that while setup() runs without pausing. Once setup() pauses at an await, these functions can no longer find the component, so they fail or behave incorrectly.

This rule reports calls to the functions listed in the functions option that come after an await in a component’s setup() function. It does nothing until you list at least one function.

Code inside <script setup> isn’t checked, because Vue keeps track of the component across each await there.

Examples

The examples below use the following configuration:

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noVueRestrictedCallAfterAwait": {
6
          "level": "on",
7
          "options": {
8
            "functions": [
9
              {
10
                "module": "vue-i18n",
11
                "path": "useI18n"
12
              }
13
            ]
14
          }
15
        }
16
      }
17
    }
18
  }
19
}

Invalid

1
<script>
2
import { useI18n } from "vue-i18n";
3

4
export default {
5
  async setup() {
6
    await fetchUser();
7
    const { t } = useI18n();
8
    return { t };
9
  },
10
};
11
</script>

code-block.vue:7:19 lint/nursery/noVueRestrictedCallAfterAwait ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This call to useI18n() from vue-i18n comes after an await in setup().
  
    5 │   async setup() {
    6 │     await fetchUser();
  > 7 │     const { t } = useI18n();
      │                   ^^^^^^^^^
    8 │     return { t };
    9 │   },
  
  ℹ The setup() function pauses here. After this point, Vue no longer knows which component is being set up.
  
    4 │ export default {
    5 │   async setup() {
  > 6 │     await fetchUser();
      │     ^^^^^
    7 │     const { t } = useI18n();
    8 │     return { t };
  
  ℹ This function is listed in the functions option because it needs to know which component is being set up. Call it before the first await in setup().
  
  ℹ 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
import { useI18n } from "vue-i18n";
3

4
export default {
5
  async setup() {
6
    const { t } = useI18n();
7
    await fetchUser();
8
    return { t };
9
  },
10
};
11
</script>

Options

`functions`

Default: []

The functions that must not be called after an await in setup(). Each entry is an object with these properties:

module: The module that exports the function, written the same way as in the import statement. This property is required.
path: The name the function is exported as. Use a list of names when the function is a property of an exported object: ["bar", "baz"] matches bar.baz() for import { bar } from "...". Defaults to "default", which matches the module’s default export.
message: A custom message to show in place of the default message.

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noVueRestrictedCallAfterAwait": {
6
          "level": "on",
7
          "options": {
8
            "functions": [
9
              {
10
                "module": "vue-i18n",
11
                "path": "useI18n"
12
              },
13
              {
14
                "module": "my-store",
15
                "path": [
16
                  "store",
17
                  "use"
18
                ],
19
                "message": "Call store.use() before the first await."
20
              },
21
              {
22
                "module": "my-plugin"
23
              }
24
            ]
25
          }
26
        }
27
      }
28
    }
29
  }
30
}

1
<script>
2
import { store } from "my-store";
3

4
export default {
5
  async setup() {
6
    await fetchUser();
7
    store.use();
8
  },
9
};
10
</script>

code-block.vue:7:5 lint/nursery/noVueRestrictedCallAfterAwait ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Call store.use() before the first await.
  
    5 │   async setup() {
    6 │     await fetchUser();
  > 7 │     store.use();
      │     ^^^^^^^^^^^
    8 │   },
    9 │ };
  
  ℹ The setup() function pauses here. After this point, Vue no longer knows which component is being set up.
  
    4 │ export default {
    5 │   async setup() {
  > 6 │     await fetchUser();
      │     ^^^^^
    7 │     store.use();
    8 │   },
  
  ℹ This function is listed in the functions option because it needs to know which component is being set up. Call it before the first await in setup().
  
  ℹ 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
import usePlugin from "my-plugin";
3

4
export default {
5
  async setup() {
6
    await fetchUser();
7
    usePlugin();
8
  },
9
};
10
</script>

code-block.vue:7:5 lint/nursery/noVueRestrictedCallAfterAwait ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This call to default() from my-plugin comes after an await in setup().
  
    5 │   async setup() {
    6 │     await fetchUser();
  > 7 │     usePlugin();
      │     ^^^^^^^^^^^
    8 │   },
    9 │ };
  
  ℹ The setup() function pauses here. After this point, Vue no longer knows which component is being set up.
  
    4 │ export default {
    5 │   async setup() {
  > 6 │     await fetchUser();
      │     ^^^^^
    7 │     usePlugin();
    8 │   },
  
  ℹ This function is listed in the functions option because it needs to know which component is being set up. Call it before the first await in setup().
  
  ℹ 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.