JSFiddle - React, Tailwind, and code Playground

by Rahul Kadyan

HTML

<script src="//unpkg.com/vue"></script>

<div id="app"></div>

JavaScript

const CompItem = {
	group: 'xxx',
	template: `<div>xxx component!</div>`
}

const NonCompItem = {
	name: 'NonCompItem',
	group: 'yyy',
  template: `<div>yyy component!</div>`
}

const OtherItem = {
	template: `<div>zzz component!</div>`
}

const Comp = {
  render (h) {
  	const children = this.$slots.default
  	return h('div', {}, children.map(vnode => {      
			if (!vnode.componentOptions || !vnode.componentOptions.Ctor) return vnode
      if (vnode.componentOptions.Ctor.extendOptions.group === 'xxx') return vnode 
      
      console.log(`[Vue Warn]: Invalid use ${vnode.componentOptions.tag || 'child'} component in Comp.`, vnode.componentOptions)
      
      
	    return vnode
    }))
  }
}

new Vue({
	el: '#app',
  template: `
  	<Comp>
    	<CompItem />
      <NonCompItem />
      <OtherItem />
    </Comp>
  `,
  components: {Comp, CompItem, NonCompItem, OtherItem}
})