Vue Component Blog Post Example

by Spero Koulouras

HTML

<script src="https://unpkg.com/vue"></script>

<div id="background" class="demo">
  <div
    v-for="panel in panels"
    v-bind:key="panel"
  >{{ panel }}</div>

  <component
    v-bind:is="currentPanelComponent"
    class="panel"
  ></component>
</div>

CSS

.tab-button {
  padding: 6px 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: 1px solid #ccc;
  cursor: pointer;
  background: #f0f0f0;
  margin-bottom: -1px;
  margin-right: -1px;
}
.tab-button:hover {
  background: lightblue;
}
.tab-button.active {
  background: green;
}
.tab {
  border: 1px solid #ccc;
  padding: 10px;
}

JavaScript

Vue.component('panel-top', { 
	template: '<div id="top">T</div>' 
})
Vue.component('panel-left', { 
	template: '<div id="left">L</div>' 
})
Vue.component('panel-right', { 
	template: '<div id="right">R</div>' 
})
Vue.component('panel-main', { 
	template: '<div id="main">M</div>' 
})


new Vue({
  el: '#background',
  data: {
    currentPanel: 'main',
    panels: ['top', 'left', 'right', 'main']
  },
  computed: {
    currentPanelComponent: function () {
      return 'panel-' + this.currentPanel.toLowerCase()
    }
  }
})