Subscribe on changes!

Suspense should support multi-root nodes

avatar
May 19th 2021

What problem does this feature solve?

Vue 3 allows components to have more than one root element.

Using such components in <Suspense> warns:

[Vue warn]: <Suspense> slots expect a single root node. 

This limits the usability of <Suspense> and makes async components feel more limited, "2nd-class citizens", in Vue 3.

This is particularly annoying when using <Suspense> at the root of <router-view>. Some CSS layouts don't work with intermediate <div> wrappers (e.g. grids, unless you know about display: contents).

Note that my app seems to work fine anyway, despite the warning? If it is obsolete then maybe the warning should just be removed.

What does the proposed API look like?

No new API surface.

avatar
Mar 16th 2023

As far as I can tell, by now it's already possible to have multiple root nodes without any warning, so this could be closed?

avatar
Dec 14th 2023

Documentation still mentions limit to one node:

Both slots only allow for one immediate child node.

And warning is still issued as of Vue v3.3.11.

Interestingly, to it also looks like everything works?