Subscribe on changes!

Teleport rendered before async dependencies resolve in Suspense component

avatar
Jun 19th 2023

Vue version

3.3.4

Link to minimal reproduction

https://play.vuejs.org/#eNp9UMtqwzAQ/JVFlzgQIpNjKwdCf6BQH31xrQ0R6IUl25jSf+/Kju0ESm6aYWc0Mz/s4v2x75C9MRGaVvkIAWPnz5VVxrs2wiWMtvlwxsO1dQZ2R74ySbh7r6zgs5REBCIar+uIhADEVxc82jAjwlL19yeBzZtvZLoobyrAoLQGZ/UILVqJLb0bhHjDLZOzaCPQbYvB6R6l4E8flKhxahFdUbFvJ8eKzeaTJrmiBGUMSkWR9Sj4IlkCr4aCP3QRfK3JDuxpkX+mbJwNESTqeoQCMhP2UJzB4gCftKkKmGVUYCJJUiqDrouJOgDd7mniytZDre4e2SnP88S+Gj7FnnLBNtSyEtTXSHue6DeKJsNS8qFVZdnvH5ezukg=

Steps to reproduce

See reproduction link.

<Suspense>
  <div>
    <AsyncComp />
    <div>This will only render once the AsyncComp is resolved</div>
    <Teleport to="body">This is rendered immediately</Teleport>
  </div>
</Suspense>

What is expected?

The Teleport is only rendered once the async dependencies of the Suspense resolve.

What is actually happening?

The Teleport is rendered immediately, before the async dependencies of the Suspense resolve.

System Info

No response

Any additional comments?

No response