JSFiddle - React, Tailwind, and code Playground

by Alex Babakhanov

HTML

<script src='https://unpkg.com/[email protected]/dist/vue.js'></script>

<div id='app'>
  <my-cmp>
    <h3 slot='title'>{{string}}</h3>
    <div>some content</div>
    <h3 slot='footer'>footer</h3>
  </my-cmp>
</div>

JavaScript

var MyCmp = {
  template: '<div style="padding: 10px; border: 1px solid red; background: white;">\
    <slot name="title"></slot>\
    <slot></slot>\
    <slot name="footer"></slot>\
  </div>'
};

new Vue({
  el: '#app',
  components: {
    myCmp: MyCmp
  },
  data: {
    string: 'A string from slot'
  }
});