Suspense should support multi-root nodes
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.
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?
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?