Panel Component simple

Vue Component 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>
<div class="container">
  <div id="app">
    <bs-panel></bs-panel>
  </div>
</div>


<!-- Templates -->
<template id="panel">
  <div class="panel panel-default">
    <div class="panel-heading">Panel title</div>
    <div class="panel-body">
      Panel content
    </div>
  </div>
</template>

CSS

body {
  margin-top: 1rem
}

JavaScript

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

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