JSFiddle - React, Tailwind, and code Playground

by rigor789

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">

  <test>
    <v-template>
      <h1>
        Hello World
      </h1>
    </v-template>
  </test>

</div>

CSS

.instance-1 {
  color: cyan;
}

.instance-2 {
  color: magenta;
}

.instance-3 {
  color: yellow;
}

.instance-4 {
  color: black;
}

JavaScript

Vue.component('test', {
  data() {
      return {
        template: false
      }
    },

    render(h) {
      if (this.template) {
        console.log('we got template')
        return h('div', {
          className: 'loop'
        }, [
          this.template(h),
          this.template(h),
          this.template(h),
          this.template(h),
        ])
      }

      console.log('we got no template')
      return h('div', {
        className: 'test'
      }, this.$slots.default)
    }
})

let i = 1;
Vue.component('v-template', {
  methods: {
    getTemplateInstance(h) {
      const childRoot = this.$slots.default[0]
      return h(childRoot.tag, {
        'class': `instance-${i++}`
      }, [...childRoot.children])
    }
  },

  created() {
    this.$parent.$data.template = this.getTemplateInstance
  },

  render(h) {}
})

new Vue({
  el: '#app'
})