Can I use empty <></> tags in vue

Where a component has multiple child elements or components, 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?

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> component to wrap multiple elements without adding an extra tag to the DOM. The <template> component 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
> component and make sure elements are nested
> correctly according to Vue's syntax rules.

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

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

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 component called VFragment

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

The component contained only the template and a default slot:

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

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