Skip to content
/ buefy Public
forked from buefy/buefy

Lightweight UI components for Vue.js based on Bulma

License

Notifications You must be signed in to change notification settings

kikuomax/buefy

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

This branch is no longer maintained. My work is going on in another repository ntohq/buefy-next.

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

About this fork

This fork (branch vue-3) is a version of Buefy that works with Vue 3 (not with Vue 2). The branch vue-3 has departed from the then latest stable version 0.9.21.

Please note that this branch was previously based on the version 0.9.7, though, it has been completely rebased from 0.9.21.

Migration goal

The migration goal was to make the documentation page of every component work. Some features not used in the documentation pages may not work. Please refer to MIGRATION-NOTE.md for more details about what challenges I faced.

Unit tests have not been touched at all.

Server-side-rendering has neither been tested.

Breaking changes

Because not all of Vue 2 features could be reproduced with Vue 3, there are some breaking changes. Please refer to CHANGELOG.md for more details. The biggest breaking change is obviously, this does not work with Vue 2.

Properties for programmatically opening a Dialog or Modal have changed from v0.9.21-vue3-1 to v0.9.21-vue3-2 (became compatible with the original Buefy). Please refer to CHANGELOG.md for more details.

How to install

To install this fork, please run the following command,

npm install 'https://github.com/kikuomax/buefy.git'

The latest version is tagged v0.9.21-vue3-2.

If you need the previous version that is based on Buefy v0.9.7, please run the following command,

npm install 'https://github.com/kikuomax/buefy.git#v0.9.7-vue3-1'

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 88KB 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 3.0+. (Vue 2 is not supported)

1 Install via npm

npm install 'https://github.com/kikuomax/buefy.git'

2 Import and use Buefy

Bundle

import { createApp } from 'vue';
import Buefy from 'buefy';
import 'buefy/dist/buefy.css';

const app = createApp();

app.use(Buefy);

or Individual Components

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

const app = createApp();

app.use(Field)
app.use(Input)

3 Include Material Design Icons

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/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.

Contributing

Please see the contributing guidelines

Versioning

Version will follow v0.Y.Z, where:

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

Core Team


Walter Tommasi

Special thanks to Rafael Beraldo, the original author.

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Rafael Beraldo

💻

Alexandre Paradis

💻

Yuxing Liao

💻

Adrien

💻

Apolokak Lab

💻

Antério Vieira

💻

Jorge Nieto

💻

Mateus Machado Luna

💻

All contributors

This project follows the all-contributors specification. Contributions of any kind welcome!

License

Code released under MIT license.

About

Lightweight UI components for Vue.js based on Bulma

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Vue 47.4%
  • JavaScript 39.8%
  • SCSS 12.3%
  • Other 0.5%