What happens when contains a top-level await? const user = await fetch("/api/me").then((r) => r.json());

The component becomes async and must be rendered inside to show a fallback

Vue blocks the entire app until the request finishes

Vue · Middle · Question 24 of 75

What happens when `<script setup>` contains a top-level `await`?

<script setup>
const user = await fetch("/api/me").then((r) => r.json());
</script>

✓Correct answer: The component becomes async and must be rendered inside <Suspense> to show a fallback
2It is a syntax error
3Vue blocks the entire app until the request finishes

Explanation

<Suspense> waits for async descendants and shows its #fallback slot meanwhile. It is still marked experimental, so many teams prefer explicit loading state.

What happens when `<script setup>` contains a top-level `await`?

Explanation

Further reading

Problem with a question

Test yourself

What happens when <script setup> contains a top-level await?

Explanation

Further reading

Test yourself

What happens when `<script setup>` contains a top-level `await`?