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

File parent.vue

<template>  <!-- parent add <suspense> -->  <suspense>    <child />  </suspense></template><script>import Child from './child.vue'export default {  components: {    child  },  setup() {    return {}  }}</script>

File child.vue

<template>  <div>child</div></template><script>export default {  async setup() {    return {}  }}</script>

For child.vue, use async setup.... For parent.vue, you need to add <suspense> to child.vue.