feat: make top-level await vue islands possible

[maoberlehner]

Description 📖

Vue components using top level await in <script setup> compile to async setup() {} components which need <Suspense> to render.

Background 📜

This was happening because

The Fix 🔨

By conditionally wrapping islands in <Suspense> we make it possible to use async setup hooks in island components.

[nx-cloud[bot]]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 4d5a000c3a20ab00cdf633168b483b91fbcec2b7. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 3 targets

• nx run-many --target=build --all --exclude docs --exclude vue-blog
• nx run-many --target=lint --all
• nx run-many --target=build --all --exclude docs --exclude vue-blog

---

Sent with 💌 from NxCloud.

[ElMassimo]

I like the idea of supporting async setup in islands out of the box. You can already achieve the same by wrapping manually, but this is more ergonomic.

Is Suspense tree-shakable in recent Vue builds?

If it is, it would be nice to do the wrapping at the island level, to allow tree-shaking Suspense when it's not used

If it's not, then we could simplify and always wrap the app in Suspense.

[maoberlehner]

I think it should be tree-shakable. But I don't know how I can implement wrapping at the island level.

[phonzammi]

Is Suspense tree-shakable in recent Vue builds?

Yes it is, vuejs on twitter