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

Question

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?

Answer 1

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.