Buefy is a lightweight library of responsive UI components for Vue.js based on Bulma framework and design.

• Keep your current Bulma theme / variables easily
• Supports both Material Design Icons and FontAwesome
• Very lightweight with none internal dependencies aside from Vue & Bulma
• About 60KB min+gzip (with Bulma included)
• Semantic code output
• Follows Bulma design and some of the Material Design UX
• Focus on usability and performance without over-animations

The documentation is in the docs directory, it serves as the demo as well.

Browse the online documentation here.

You need Vue.js version 2.5+.

npm install buefy

import Vue from 'vue';
import Buefy from 'buefy';
import 'buefy/lib/buefy.css';

Vue.use(Buefy);

// OR

Vue.component(Buefy.Checkbox.name, Buefy.Checkbox);
Vue.component(Buefy.Table.name, Buefy.Table);
Vue.component(Buefy.Switch.name, Buefy.Switch);

<link rel="stylesheet" href="//cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css">

If you want to customize the icons or the theme, refer to the customization section on the documentation.

<!-- Buefy CSS -->
<link rel="stylesheet" href="https://unpkg.com/buefy/lib/buefy.min.css">

<!-- Buefy JavaScript -->
<script src="https://unpkg.com/buefy"></script>

// Global variable
Vue.use(Buefy.default)

While it's still in beta, version will follow v0.Y.Z, where:

• Y: Major (breaking changes)
• Z: Minor or patch

As soon as it's stable and v1 is ready, I'll switch to vX.Y.Z (SemVer).

• Firefox 38+
• Chrome 38+
• Edge 13+
• Opera 44+
• Safari 7+
• Internet Explorer 10+ is only partially supported

Might work in other versions, but it's not tested.

• Vue.js for the great reactive js framework
• Bulma for the best flexbox css framework out there
• The original idea from vue-admin
• Some code structure and ideas from:
  • vue-blu
  • vue-material
  • element-ui

Copyright (c) 2017 Rafael Beraldo. Code released under the MIT license.

Twitter @rafaelpimpa