Vue-loader: Allow functional components to have multiple root elements
What problem does this feature solve?
As discussed in https://github.com/vuejs/vue/issues/7088 multiple root elements are not currently possible in Vue components, with @LinusBorg stating that multiple root elements will not be supported (in the general case) any time soon.
The exception to this is for functional components, where multiple root elements are allowed. Here's a jsfiddle from @trusktr showing it, though using a render function:
https://jsfiddle.net/b049qboe/1/
This feature would allow multiple root elements in elements used in single-file components. Vue-loader 14.1.1 produces the following error in this scenario:
- Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
What does the proposed API look like?
In a single-file component:
<template functional>
<!-- Multiple root elements, e.g. -->
<div>lorum</div>
<div>ipsum</div>
<div>dolor</div>
</template>
euoia
All 13 comments
This would make creating functional components a lot easier :slightly_smiling_face:
McSneaky
on 23 Apr 2018
+1
JoshuaSoileau
on 10 Jul 2018
It would be very useful especially in cases when you want to create a component for definition lists.
DefinitionList for <dl> and DefinitionItem for <dt> <dd>.
atorscho
on 23 Jul 2018
This issue relates to vue-compiler package and not to vue-loader
stalniy
on 15 Aug 2018
@stalniy which package / repository are you talking too? I have no vue-compiler in my vuejs projects
mathroc
on 15 Aug 2018
@mathroc I'm saying that the fix should be done in vue template compiler here (https://github.com/vuejs/vue/blob/dev/src/compiler/parser/index.js#L198) and not in vue loader
stalniy
on 15 Aug 2018
Looks like Vue itself already supports multiple roots in functional components.
https://github.com/vuejs/vue/issues/7088#issuecomment-345855657
nolde
on 11 Jan 2019
@nolde OP is aware of that, his request us about functional templates.
LinusBorg
on 11 Jan 2019
@LinusBorg , my point was about @stalniy mentioning that this issue should be fixed in vue-template-compiler instead of vue-loader. If vue already supports that in functional components, it probably supports that in the template compiler already. If it doesn't, then those are two different issues.
nolde
on 14 Jan 2019
+1. Found myself needing this to make effective use of CSS grids (especially while display: contents isn't well supported). I had to work around the limitation by merging what would have been sub-components into a single more complex component.
vinaypai
on 11 Jul 2019
Tip for people having this issue: use JSX.
The JSX loaders for vue support multiple roots by returning an array of components/elements, and it also works around the issue of not being able to register local components. It is perfect for functional components.
nolde
on 12 Jul 2019
I also am facing issues, even in the same case @atorscho, trying to create something like this:
<template functional>
<dt class="col-sm-3">{{ title }}</dt>
<dd class="col-sm-9">
<slot />
</dd>
</template>
MLDMoritz
on 5 Jan 2020
https://github.com/vuejs/vue/blob/dev/src/compiler/parser/index.js#L198
@stalniy Note that links without a commit will not match the intended line-number in future.
mryellow
on 31 Mar 2021
Related issues
chrisvfritz
路
4Comments
C0deZLee
路
3Comments
sdvcrx
路
3Comments
yozman
路
4Comments
matt-sanders
路
4Comments
Most helpful comment
This would make creating functional components a lot easier :slightly_smiling_face: