Why did I get blank (empty) content when I used async setup() in Vue.js 3?

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>

demo

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)