Unable to mark Vue setup function as async

Question

I have a Vue3 app using the composition api and want to fetch data asynchronously inside the setup function.

Approaches that worked for me:

---

Working with Promises

    <template>
      <div>{{ result }}</div>
    </template>
    
    <script lang="ts">
    import { defineComponent, ref } from "vue";
    
    export default defineComponent({
      setup() {
        const result = ref();
    
        fetch("https://api.publicapis.org/entries")
          .then((response: Response) => response.json())
          .then((jsonResponse: any) => {
            result.value = jsonResponse;
          });
    
        return { result };
      },
    });
    </script>

---

Working with the onMounted hook

    <template>
      <div>
        {{ result }}
      </div>
    </template>
    
    <script lang="ts">
    import { defineComponent, ref, onMounted } from "vue";
    
    export default defineComponent({
      setup() {
        const result = ref();
    
        onMounted(async () => {
          const response = await fetch("https://api.publicapis.org/entries");
          result.value = await response.json();
        });
    
        return { result };
      },
    });
    </script>

---

But I wasn't able to use async/await directly like so

    <template>
      <Suspense>
        <template #default>
          {{ result }}
        </template>
        <template #fallback> Loading... </template>
      </Suspense>
    </template>
    
    <script lang="ts">
    import { defineComponent, ref } from "vue";
    
    export default defineComponent({
      async setup() {
        const result = ref();
    
        const response = await fetch("https://api.publicapis.org/entries");
        result.value = await response.json();
    
        return { result };
      },
    });
    </script>

Based on this question

@vue-composition / How can I use asynchronous methods in setup()

and this linked article

https://vueschool.io/articles/vuejs-tutorials/suspense-new-feature-in-vue-3/

it should work.

The posted component is just the default Home.vue component rendered by the Vue router. So inside App.vue I'm using the tag <router-view /> and load the app with the home route.

How can I mark setup as async?

Answer 1

First please be careful as Suspense is still experimental feature and can change any time...

In order to async setup to work, the component itself must be inside <suspense> ....your component is not inside <suspense> - it contains <suspense> component (which of course can not work until the component is created and that can happen only after your async setup resolves). You must place <suspense> as a child of <router-view> - see the docs

Here is a working demo (if you see import declarations may only appear at top level of a module first, just reload the right pane using the reload icon - seems like some glitch in the Matrix)

// App.vue
<router-view v-slot="{ Component }">
  <suspense timeout="0">
    <template #default>
      <component :is="Component"></component>
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </suspense>
</router-view>

// Home.vue
<template>
  <div class="home">
    <pre>{{ result }}</pre>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  async setup() {
    const result = ref();

    const response = await fetch("https://api.publicapis.org/entries");
    result.value = await response.json();

    return { result };
  },
});
</script>

Notice timeout="0" on suspense - it seems there is a timeout for switching to a "loading" state (probably to avoid too much screen flickering when async components resolve quickly enough)

A timeout prop can be specified - if a pending tree remains pending past the timeout threshold, the active tree will be unmounted and be replaced by the fallback tree.

I'm unable to find what is the default value for timeout right now. Feel free to tune it for your own needs...