Fragment component

[CyberAP]

This is a discussion for Fragment component proposal.

[jods4]

How is h('fragment') implemented? Would it be much more efficient than a userland functional component that performs this?

// Code slightly simplified for clarity
function wrapper({ shouldWrap }, { slots }) {
  return shouldWrap 
    ? h("Wrapper", slots.default())
    : slots.default();
}

[CyberAP]

Good question!

How the code would look like if we'd wanted to pass a dynamic component with props there?

I assume if we update the implementation it would look like this:

<wrapper :should-wrap="shouldWrap" :component="wrapperComponent" :attributes="attributes">
  Some contents...
</wrapper>

Which solves basic cases, but we're in fact re-implementing Vue's functionality here. If we'd like to add directives there it'll get more complicated.

[jods4]

For dynamic componenet + props I'd rather have gone something like below.
It should work for props at least, I am not sure what the behavior for directives is gonna be here.

function wrapper({ shouldWrap, component }, { slots, attrs }) {
  return shouldWrap 
    ? h(component, attrs, slots.default())
    : slots.default();
}

How these kind of things work needs to be clearly spelled out in the RFC, as I assume you don't want wrapper properties (or directives?) to fallback inside the h('fragment') but that'd be the default behaviour unless specified otherwise?

The code above is a pretty simple functional component, at this stage I wouldn't say it's "re-implementing Vue" and should work except maybe with directives.

I haven't thought about directives deeply and they might justify something in Vue core.
Otherwise I think this could easily be a npm package.

[posva]

As @jods4 pointed out this can be easily implemented in userland. The RFC should probably go deeper and outline benefits or existing limitations to justify adding something new.

[CyberAP]

An additional custom directives example has been added to illustrate the problems that can not be solved with a user-land fragment component.

[posva]

directives work too

[iamandrewluca]

Strange why import { Fragment } from 'vue' does not work by default 🤔

[edison1105]

a fragment can only have array children since they are either generated by the compiler, or implicitly created from arrays. but slot is an object, so its not work.

[iamandrewluca]

Fragment.vue 🤣

<template>
  <slot />
</template>

[cepm-nate]

Trying to use import { Fragment } from 'vue'; gives me "Unknown custom element: ...", even when within the 'components' array. But when I try to create my own "fragment.vue" like you show above (so simple!), Vue's ESLINT whines about "Cannot use as a component root element because it may contain multiple nodes".

I can disable the whining, but would rather follow the rules for future issues.

Does anyone have a working "implementation in userland" of this?

[iamandrewluca]

What version of Vue are you using?

[cepm-nate]

Vue 2.6.14. Thankfully I can use some CSS selectors and abolish the styling of the extra wrapper element when it's not needed. Not a solution for everyone, but workable for me now. I still vote for this feature to be considered in the future. :-)

[iamandrewluca]

Vue 2 does not support multiple root elements. I think you can try this. 🤔
display: contents; will make in a way the element "virtual"

<template>
  <div style="display: contents;">
    <slot />
  </div>
</template>

https://developer.mozilla.org/en-US/docs/Web/CSS/display

[ferferga]

The problem with this approach is that attributes will not be passed through. Either the Slot API is redesigned as well to allow this, or a Fragment component, as proposed here, it's done.

The reason why it's not supported is due to scoped slots

[andrewsm80]

If something like this does eventually get implemented, I think it would make a lot more sense to use a directive, analogous to the v-if directive:

  <div v-wrap-if="someCondition">
    <span>
      This is a span that is sometimes wrapped up in a div.
    </span>
  </div>

  <WrapperComponent v-wrap-if="someCondition" :foo="getFoo()" :bar="getBar()">
    <span>
      This is a span that is sometimes wrapped up in a WrapperComponent.
      The getFoo() and getBar() expressions should only be evaluated if the wrapper component is rendered.
    </span>
  </div>

Conditionally rendering wrapper elements/components is such a basic operation, the syntax should match that in terms of simplicity.

[distor-sil3nt]

Is there any news on this? The conditional wrapper feature would be really useful and I'm wondering whether something was already implemented in this regard? Either as a custom directive or via the <compontent> tag.

[katerlouis]

Any new status update? :)

[distor-sil3nt]

What I did as a patch for this missing feature was to create a helper component / module in my utils directory (under src/utils/helpers) called useFragment.ts and basically just return the slots or default slot for this component:

useFragment.ts

import { defineComponent } from 'vue'

export const useFragment = defineComponent({
  inheritAttrs: false,
  render() {
    return this.$slots && (typeof this.$slots.default === 'function' ? this.$slots.default() : '')
  },
})

In the template I used it like this:

<template>
  <Component :is="!isDocument ? 'a' : useFragment" :href="item.url" target="_blank">
    {{ item.title }}
  </Component>
</template>

<script setup lang="ts">
   import { useFragment } from '@/utils'
   
   [...]
</script>

I hope this helps someone looking for a solution to this. It would still be better if it was integrated as a default functionality in Vue. I would highly appreciate it if someone from the core team could attend to this matter.

[katerlouis]

sleek workaround; wondering if Vue will come up with a native solution

[katerlouis]

Inspired by @distor-sil3nt, I made a Nuxt 2 (Vue 2.7) compatible component for optional wrapping:

<script>
export default {
  name: 'Fragment',

  render(h) {
    if (this.$slots && this.$slots.default) {
      return this.$slots.default;
    }

    return null;
  },
};
</script>

usage:

<component :is="isLink ? 'a' : 'Fragment' :href="url">Click me</component>

[slavco86]

Looks like a neat solution in Vue 3
|https://dev.to/alexander-nenashev/conditional-wrap-component-in-vue-3-pt3-8dp