[Vuejs]-Is there anything like React Fragment in VueJS, NuxtJS?

by

2👍

Vue v3

Vue v3 supports multi-root components out-of-the-box. However it does not support deeply nested fragments.

UPDATE: You can nest <template>!

<template>
  <div>
    <ul>
      <li>A</li>
      <li>B</li>
      <template>
        <li>C</li>
        <li>D</li>
      </template>
    </ul>
  </div>
</template>
👤Raine Revere

1👍

There is no official solution from the Vue team yet but there is a npm module vue-fragment created by Julien Barbay that will enable the use of <Fragment> in vue templates. 

<Fragment>
  <element / >
  <element / >
  <element / >
</Fragment>

Will output

<!--Fragment-->
  <element / >
  <element / >
  <element / >
<!--Fragment-->

I’m not sure what the purpose of the html comment is – but the output is now more semantic.

This post explains more in details: https://blog.logrocket.com/fragments-in-vue-js/

👤Ronni DC

Leave a comment