Vue version

3.2.39

Link to minimal reproduction

https://stackblitz.com/edit/github-fktkzl-2bccdr

Steps to reproduce

1. Load the app with npm run dev if it does not auto-start, looking at the browser console log.

2. Press the 'Trigger suspense' button

What is expected?

I expect both in the initial hydration and in the subsequent suspense invocation for suspense not to have resolved by the time the async child component runs its setup.

What is actually happening?

In the initial hydration of the app, <Suspense> does not include child components within its cloak of suspense.

System Info

No response

Any additional comments?

No response

It seems suspense only works with async setup instead of async component?

https://stackblitz.com/edit/github-fktkzl-bhp65u?file=src%2FApp.vue

If it changed to async setup, then everything works

Async components are wrapped into suspense when the suspense is triggered on client-side, and <Suspense> documentation says that async components should be treated as dependencies: https://vuejs.org/guide/built-ins/suspense.html#async-components.

https://stackblitz.com/edit/github-fktkzl-ptamri?file=src%2FApp.vue

I think what breaks the source issue is nested suspense. But that should probably be a separate issue.

The async component under nested suspense seems never be included by parent suspense in any case. Which is how nuxt 3 use the Suspense here.

<NuxtRoot> Suspense
  <App> Async
    <Layout> Suspense <= Notice: they are nested
      <Page> Async

There is only one Suspense in the reproduction here.

And if you look at the PR I think you are referring to, you should see that we already ensure there is only one Suspense there.

@danielroe in terms of getting this to work properly for nuxt3 has there been any progress? All issues point to this which has some merged PRs but it's still an issue.