JSFiddle - React, Tailwind, and code Playground

by inser

HTML

<link rel="stylesheet" href="//unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/[email protected]/dist/bootstrap-vue.css">
<script src="//unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<script src="//unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="//unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>
<script src="//unpkg.com/[email protected]/dist/bootstrap-vue-icons.js"></script>
<div id="app">
  <v-form>
    Hello
    <input />
  </v-form>
</div>

CSS

body { padding: 1rem; }

JavaScript

window.onload = () => {
	Vue.component('v-form', {
  	template: '<div style="color: red"><slot /></div>',
    mounted () {
    	console.log(this.$children, this.$slots.default.children)
    	for (let child of this.$children) {
      	console.log(child)
      	child.$el.style.color = 'red'
      }
    }
  })

	Vue.component('todo-list', {
    provide () {
    	return {
        user: 'John Doel'
      }
    },
    template: '<div><slot /></div>'
  })
  
  Vue.component('todo-list-stats', {
  	data () {
    	return {
      	user1: '123'
      }
    },
  	inject: ['user'],
  	template: '<div><slot /><h1>: {{ user1 }}</h1></div>',
    mounted () {
    	
    }
  })

  new Vue({
    el: '#app',
    data() {
      return {
        name: 'BootstrapVue',
        show: true
      }
    },
    watch: {
      show(newVal) {
        console.log('Alert is now ' + (newVal ? 'visible' : 'hidden'))
      }
    },
    methods: {
      toggle() {
        console.log('Toggle button clicked')
        this.show = !this.show
      },
      dismissed() {
        console.log('Alert dismissed')
      }
    }
  })
}