[Vuejs]-Can I use empty tags in vue

0👍

✅

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>.

👤3m1n3nc3

[Vuejs]-How to display a default fontawesome icon when icon is not registered ? (Vue, Angular or React)

3👍

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.

👤Luciano Griffa