JSFiddle - React, Tailwind, and code Playground

by jeffory

HTML

<script type="text/x-template" id="modal-template">
	<div>
    <slot></slot>
  </div>
</script>

<div id="app">
  <modal :name="name">
    <template scope="name">
      <p>Hello {{ name }}</p>
    </template>
  </modal>
</div>

Babel + JSX

Vue.component('modal', {
	data: function () {
    return {
      name: 'Bob'
    }
  },
  template: '#modal-template'
});

new Vue({
	el: '#app',
  data: {
  	name: 'bob',
    props: { name: 'bob' }
  }
});