Allow functional components to have multiple root elements

[euoia]

What problem does this feature solve?

As discussed in vuejs/vue#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>

[McSneaky]

This would make creating functional components a lot easier 🙂

[JoshuaSoileau]

+1

[atorscho]

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>.

[stalniy]

This issue relates to vue-compiler package and not to vue-loader

[mathroc]

@stalniy which package / repository are you talking too? I have no vue-compiler in my vuejs projects

[stalniy]

@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

[nolde]

Looks like Vue itself already supports multiple roots in functional components.

vuejs/vue#7088 (comment)

[LinusBorg]

@nolde OP is aware of that, his request us about functional templates.

[nolde]

@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.

[vinaypai]

+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.

[nolde]

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.