JSFiddle - React, Tailwind, and code Playground

by Katarn

HTML

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <html-fragment :html="html1"></html-fragment>
  <html-fragment :html="html2"></html-fragment>
</div>

Babel + JSX

console.clear()


defineComponent({
	
  functional: true,
  props: ['html'],
  render(h, ctx) {
    const nodes = new Vue({
      beforeCreate() { this.$createElement = h }, // not necessary, but cleaner imho
      template: `<div>${ctx.props.html}</div>`
    }).$mount()._vnode.children
    return nodes
  }
})


createApp({
  data: {
    message: 'message',
    html1: `
    <div>A</div>
    <p>B</p>
    `,
    html2: `
    <div>C</div>
    <p>D</p>
    `,
  },
}).mount('#app')