Panel Component with slot

Vue Component slot demo by http://qcode.in

by Saqueib Ansari

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<!-- Templates -->
<template id="panel">
  <div class="panel panel-default">
  
    <!-- title named slot -->
    <div class="panel-heading">
      <slot name="title">Panel title</slot>
    </div>
    
    <div class="panel-body">
      <!-- defult slot for body -->
      <slot>Panel content...</slot>
    </div>
    
  </div>
</template>

<div class="container">
  <div id="app">
    <bs-panel>
      <!-- you can use slot directive to explicitly tell to use a named slot -->
      <div slot="title">Slot title ✌🏼</div>
      
      <p class="text-muted">Direct children will go into default slot</p>
      I am coming from a slot machine
      <h4>Now I can have my own html</h4>
      <p>and emoji 😎</p>

    </bs-panel>
  </div>
</div>

CSS

body {
  margin-top: 1rem
}

JavaScript

// Component 
Vue.component('bs-panel', {
  template: '#panel',
});

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