New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow functional components to have multiple root elements #1168

Open
euoia opened this Issue Feb 19, 2018 · 6 comments

Comments

Projects
None yet
7 participants
@euoia

euoia commented Feb 19, 2018

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 comment has been minimized.

McSneaky commented Apr 23, 2018

This would make creating functional components a lot easier 🙂

@JoshuaSoileau

This comment has been minimized.

JoshuaSoileau commented Jul 10, 2018

+1

@atorscho

This comment has been minimized.

atorscho commented Jul 23, 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>.

@stalniy

This comment has been minimized.

stalniy commented Aug 15, 2018

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

@mathroc

This comment has been minimized.

mathroc commented Aug 15, 2018

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

@stalniy

This comment has been minimized.

stalniy commented Aug 15, 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment