Vue component prop without value

by Alejandro M

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<div id="app">
  <my-button primary>Save</my-button>
</div>

CSS

button {
  background: #eee;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 16px;
}


button.primary {
  background: #3498db;
  color: #eee;
}

JavaScript

Vue.component("my-button", {
  props: {"primary": Boolean},
  template: "<button v-bind:class='{primary: primary}'>{{primary}}<slot></slot></button>"
})

new Vue({
  el: "#app"
})