Where a ponent has multiple child elements or ponents, they are supposed to be nested within a single parent tag <div></div> for example, but this may not be what I want, React allows the use of empty <></> tags in this case, here is an instance:

function Example() {

  return (
    <>
      <RadioGroup defaultValue={placement} onChange={setPlacement}>
        <Stack direction='row' mb='4'>
          <Radio value='top'>Top</Radio>
          <Radio value='right'>Right</Radio>
          <Radio value='bottom'>Bottom</Radio>
          <Radio value='left'>Left</Radio>
        </Stack>
      </RadioGroup>
      <RadioGroup defaultValue={placement} onChange={setPlacement}>
        <Stack direction='row' mb='4'>
          <Radio value='top'>Top</Radio>
          <Radio value='right'>Right</Radio>
          <Radio value='bottom'>Bottom</Radio>
          <Radio value='left'>Left</Radio>
        </Stack>
      </RadioGroup>
    </>)
}

My question is, can this approach also be used in Vue? I don't seem to find any reference to it in the documentation. If this is not possible, is there a workaround for it?

Where a ponent has multiple child elements or ponents, they are supposed to be nested within a single parent tag <div></div> for example, but this may not be what I want, React allows the use of empty <></> tags in this case, here is an instance:

function Example() {

  return (
    <>
      <RadioGroup defaultValue={placement} onChange={setPlacement}>
        <Stack direction='row' mb='4'>
          <Radio value='top'>Top</Radio>
          <Radio value='right'>Right</Radio>
          <Radio value='bottom'>Bottom</Radio>
          <Radio value='left'>Left</Radio>
        </Stack>
      </RadioGroup>
      <RadioGroup defaultValue={placement} onChange={setPlacement}>
        <Stack direction='row' mb='4'>
          <Radio value='top'>Top</Radio>
          <Radio value='right'>Right</Radio>
          <Radio value='bottom'>Bottom</Radio>
          <Radio value='left'>Left</Radio>
        </Stack>
      </RadioGroup>
    </>)
}

My question is, can this approach also be used in Vue? I don't seem to find any reference to it in the documentation. If this is not possible, is there a workaround for it?

• javascript
• reactjs
• vue.js
• templates
• tags

Share Improve this question Follow asked Jun 14, 2023 at 18:32 3m1n3nc33m1n3nc3 5751010 silver badges2828 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

My understanding is that you cannot directly use the empty tag syntax <></> as in React, but there are alternatives to achieve a similar result in Vue.

One option is to use the <template> ponent to wrap multiple elements without adding an extra tag to the DOM. The <template> ponent does not render as an HTML tag and allows elements to be grouped together without adding another element to the resulting tree of elements.

Here's an example of how you could use it:

<template>
   <RadioGroup defaultValue={placement} onChange={setPlacement}>
     <Stack direction='row' mb='4'>
        <Radio value='top'>Top</Radio>
        <Radio value='right'>Right</Radio>
        <Radio value='bottom'>Bottom</Radio>
        <Radio value='left'>Left</Radio>
     </Stack>
   </RadioGroup>
   <RadioGroup defaultValue={placement} onChange={setPlacement}>
     <Stack direction='row' mb='4'>
        <Radio value='top'>Top</Radio>
        <Radio value='right'>Right</Radio>
        <Radio value='bottom'>Bottom</Radio>
        <Radio value='left'>Left</Radio>
      </Stack>
   </RadioGroup>
</template>

Remember that in Vue, it is important to maintain a proper structure of the ponent and make sure elements are nested correctly according to Vue's syntax rules.

After a few weeks of being frustrated at the requirement and tinkering, I came up with a rather simple, straightforward solution that does not require me to install any third-party library.

I created a new ponent called VFragment

Added it as a global ponent in my main.js for ease of reusability

The ponent contained only the template and a default slot:

<template>
    <slot></slot>
</template>

This way, I can use <v-fragment></v-fragment> as the root ponent and not have the bloat of an extra div while having any other elements or ponents as direct children of the <v-fragment></v-fragment>.

about fragments in vue (there is no direct counterpart) https://blog.logrocket./fragments-in-vue-js/

Also there is this https://www.npmjs./package/vue-fragment