How to use vue3 suspense on the root level?

Question

In vue3, my template is like this

<template>
  <v-app>
  </v-app>
</template>

<script setup lang="ts">
...
const a = await Setup();
</script>

But I get this warning

[Vue warn]: Component <Anonymous>: setup function returned a promise, but no <Suspense> boundary was found in the parent component tree. A component with async setup() must be nested in a <Suspense> in order to be rendered. 
  at <App>

How can I resolve this?

Answer 1

A good way would be to create a wrapper on the fly in the main.js file and use it to wrap App with Suspense like so:

// main.js

import { createApp } from "vue";
import App from "./App.vue";

const TheApp = {
  template: `<Suspense><App /></Suspense>`,
  components: { App },
};
    
createApp(TheApp).mount("#app");

Answer 2

Just remove await from the top level of the <script>:

<script setup>

import {onMounted, reactive} from 'vue';
const a = reactive({});

onMounted(async () => {
    Object.assign(a, await Setup());
});

</script>