<div id="app">
  <div>
    <vu-button>primary</vu-button>
    <vu-button color="secondary">secondary</vu-button>
    <vu-button color="info">info</vu-button>
    <vu-button color="success">success</vu-button>
    <vu-button color="warning">warning</vu-button>
    <vu-button color="danger">danger</vu-button>
    <vu-button color="light">light</vu-button>
    <vu-button color="dark">dark</vu-button>
  </div>
  <hr/>
  
  <div>
    <h4>Disabled</h4>
    <vu-button disabled>primary</vu-button>
    <vu-button color="secondary" disabled>secondary</vu-button>
    <vu-button color="info" disabled>info</vu-button>
    <vu-button color="success" disabled>success</vu-button>
    <vu-button color="warning" disabled>warning</vu-button>
    <vu-button color="danger" disabled>danger</vu-button>
    <vu-button color="light" disabled>light</vu-button>
    <vu-button color="dark" disabled>dark</vu-button>
  </div>
</div>
#app {
  margin: 1rem;
}
.vu-button {
  margin: .3rem;
}
View Compiled
new Vue({
  el: '#app',
})
View Compiled

External CSS

  1. https://cdn.jsdelivr.net/npm/@gloriajun/gvu@0.1.1/dist/gvu.css

External JavaScript

  1. https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js
  2. https://cdn.jsdelivr.net/npm/vue/dist/vue.js
  3. https://cdn.jsdelivr.net/npm/@gloriajun/gvu@0.1.1/dist/gvu.umd.min.js