Skip to content
Lightweight UI components for Vue.js based on Bulma
Branch: dev
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci CircleCI config updated (#628) Feb 20, 2018
.github Refactoring build (and add single components) and new docs Aug 8, 2018
build
config
docs Typo in MDI url. Forgot 'https:' (#1298) Mar 22, 2019
src Revert "Fix changing Switch states with space key in Firefox (#1285)" ( Mar 21, 2019
static Refactoring build (and add single components) and new docs Aug 8, 2018
types Add notification programmatic Mar 20, 2019
.babelrc Fix code coverage Mar 8, 2018
.editorconfig
.eslintignore Docs improvement (#474) Dec 14, 2017
.eslintrc.js Disable attributes-order now, but enable in the future Mar 8, 2018
.gitignore Refactoring build (and add single components) and new docs Aug 8, 2018
BACKERS.md Update Backers Mar 7, 2019
CHANGELOG.md Improve message accessibility Mar 20, 2019
LICENSE Update license Jan 16, 2019
README.md Add twitter link Feb 16, 2019
index.html Update domain links Feb 13, 2019
jest.config.js
jsconfig.json Update changelog and some consistency fixes Jun 27, 2017
package-lock.json Adding draggable to table rows (#1250) Mar 5, 2019
package.json
yarn.lock Add unit test for Autocomplete, Checkbox and CheckboxButton (#1012) Oct 19, 2018

README.md

Buefy 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-animating stuff

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 buefy

2 Import and use Buefy

Bundle

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

Vue.use(Buefy);

or Individual Components

import Vue from 'vue'
import { Field, Input } from 'buefy/dist/components'
import 'buefy/dist/buefy.css'

Vue.use(Field)
Vue.use(Input)

or

import Vue from 'vue'
import Field from 'buefy/dist/components/field'
import Input from 'buefy/dist/components/input'
import 'buefy/dist/buefy.css'

Vue.use(Field)
Vue.use(Input)

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/buefy/dist/buefy.min.css">

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

Browser support

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

Versioning

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

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

Maintainers

Supporting through Patreon

Buefy is an open source MIT project if you are interested in supporting this project, please consider becoming a patron.

Become a Patron

License

Code released under MIT license.

Copyright (c), Rafael Beraldo.

You can’t perform that action at this time.