VBlue

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

Features

• 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

Documentation

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

Browse online documentation here.

Quick start

You need Vue.js version 2.5+.

1 Install via npm

npm install vblue

2 Import and using

import Vue from 'vue';
import VBlue from 'vblue';
import 'vblue/lib/vblue.css';
 
Vue.use(VBlue);
 
// OR
 
Vue.component(VBlue.Checkbox.name, VBlue.Checkbox);
Vue.component(VBlue.Table.name, VBlue.Table);
Vue.component(VBlue.Switch.name, VBlue.Switch);

3 Include Material Design Icons

<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.

Alternatively, you can use a CDN or even download

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

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

Browser support

Recent versions of Firefox, Chrome, Edge, Opera and Safari. IE10+ is only partially supported.

Special Thanks

• Evan You created VueJS
• Jeremy Thomas created Bulma
• Rafael Beraldo created Buefy

Credits

• Oanh Nguyen
• All Contributors

License

Code released under MIT license.

Copyright (c) 2017, Oanh Nguyen.