why i got blank when use async setup() in Vue3

Question

Problem

I use async setup() in Vue3,but i got my html disappear，my component template not insert to html,but when i remove the async and await prefix

Answer 1

Your component's async setup() looks fine other than the missing await res.json(), which still wouldn't cause the problem you're seeing. I suspect your usage of <Suspense> is incorrect.

To use async setup() in a component, the parent component must use that component in a <Suspense> tag:

<!-- Parent.vue -->
<template>
 <Suspense>
   <MyAsyncComponent />
 </Suspense>
</template>

You could also use the default and fallback slots of <Suspense> to show a loading indicator while waiting for the child component's setup to resolve:

<!-- Parent.vue -->
<template>
 <Suspense>
   <template #default>
     <MyAsyncComponent />
   </template>
   <template #fallback>
     <span>Loading...</span>
   </template>
 </Suspense>
</template>

Verified with vue@3.0.0-0, Node 14, Chrome 84, macOS Catalina. Note that <Suspense> is still experimental, and the API is subject to change.

demo