What is Fragment and what can it do?

[tbontb-iaq]

In the source code of TransitionGroup, I found that it uses Fragment, an undocumented but exported built-in component in vue.

It also seems to be used to wrap some sub-components. So what is the difference between it and template?

I also discovered some strange behaviors.

<template>
  <div class="draft-page">
    <Fragment>
      <p>I will not be rendered on the page</p>
    </Fragment>
    <component :is="Fragment">
      <p>I won't be rendered to the page either</p>
    </component>

    <component :is="vnode" />
    <component :is="jsx" />
    <component :is="MyFragment">
      <p>I will also be rendered on the page</p>
    </component>
  </div>
</template>

<script lang="tsx" setup>
import { h, Fragment, FunctionalComponent } from 'vue'

const vnode = h(Fragment, null, [
  h('p', null, ['I will be rendered on the page']),
])

const jsx = (
  // @ts-expect-error Type '{ $children: Element; }' does not have the same properties as type 'IntrinsicAttributes & VNodeProps'
  <Fragment>
    <p>TS complains, but I get rendered to the page</p>
  </Fragment>
)

const MyFragment: FunctionalComponent = (_, { slots }) => (
  // @ts-expect-error Type '{ $children: Element; }' does not have the same properties as type 'IntrinsicAttributes & VNodeProps'
  <Fragment>{slots.default?.()}</Fragment>
)
</script>

Why using Fragment directly in template and component doesn't work?

[LinusBorg]

A Fragment is not a real component. it's a Symbol representing a special kind of vnode. Fragments wrap dynamic lists of elements, typically created with v-for or by using a slot in a template.

It's not meant to be used by developers in templates because the compiler inserts them where it makes sense anyway.

[tbontb-iaq]

When we write <template v-for>, does the compiler create a Fragment? Why do Fragments only work in render functions and jsx, but not in templates?

[LinusBorg]

When we write <template v-for>, does the compiler create a Fragment?

Yes it does.

Why do Fragments only work in render functions and JSX, but not in templates?

They work in JSX/render functions by accident, I'd say.

[tbontb-iaq]

That is, Fragment is the internal implementation of template (when wrapping the list), and TransitionGroup takes advantage of this.

[LinusBorg]

That's the main purpose, yes.