A way to render multiple root elements on VueJS with v-for directive

A simple example is having a component which renders multiple <li> elements:

<template>
 <li>Item</li>
 <li>Item2</li>
 ... etc
</template>

However the above will throw an error. To solve this error the above template can be converted to:

export default {
 functional: true,
 render(createElement) {
  return [
    createElement('li', 'Item'),
    createElement('li', 'Item2'),
  ]
 }
}

But again as you probably noticed this can get very tedious if for example you want to display 50 li items. So, eventually, to dynamically display elements you can do:

export default {
 functional: true,
 props: ['listItems'], //this is an array of `<li>` names (e.g. ['Item', 'Item2'])

 render(createElement, { props }) {
   return props.listItems.map(name => {
     return createElement('li', name)
   })
 }
}

INFO in those examples i have used the property functional: true but it is not required of course to use "render functions". Please consider learning more about functional components here