How to just add the content of a component to Vue DOM and not the wrapper itself, like React.Fragment in React JS

Question

I'm trying to refactor my code into readable and short pieces. Therefore sometimes I need to create a dumb component which only is holding the repetitive part of my code. For example I wanted to use Table component from PrimeVue library and I tried to render the Column component in an other component But the problem is when I use it, the component wraps it's content which is Column inside it's own name. Of course not in the real DOM But in Vue Devtools tree. Well it breaks the Table component's connection with the 'Column' which is inside new component.

What I want to achieve is to implement React.Fragment in Vue.

I tried to find a way but I found nothing related to this case.

Answer 1

You don't need to have a single root node (wrap it into something like a fragment) in Vue. Use a component and put everything at the top level.

https://v3-migration.vuejs.org/new/fragments.html