https://github.com/buefy/buefy
Lightweight UI components for Vue.js based on Bulma
https://github.com/buefy/buefy
bulma components vue vue-admin vue-bulma vuejs
Last synced: 6 months ago
JSON representation
Lightweight UI components for Vue.js based on Bulma
- Host: GitHub
- URL: https://github.com/buefy/buefy
- Owner: buefy
- License: mit
- Created: 2017-03-31T16:44:48.000Z (almost 9 years ago)
- Default Branch: dev
- Last Pushed: 2025-09-02T18:34:16.000Z (6 months ago)
- Last Synced: 2025-09-02T20:26:05.641Z (6 months ago)
- Topics: bulma, components, vue, vue-admin, vue-bulma, vuejs
- Language: Vue
- Homepage: https://buefy.org
- Size: 33.2 MB
- Stars: 9,565
- Watchers: 101
- Forks: 1,109
- Open Issues: 76
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-web-development - buefy: Lightweight UI components for Vue.js based on Bulma
- my-awesome-list - buefy - Lightweight UI components for Vue.js based on Bulma (Markup Languages / CSS)
- awesome-starred - buefy - Lightweight UI components for Vue.js based on Bulma (Vue)
- awesome-vue - buefy ★4580 - Components based on Bulma framework. (Frameworks / Responsive)
- awesome-bookmarks - **buefy**
README
> Buefy is a lightweight library of responsive UI components for [Vue.js](https://vuejs.org/) based on [Bulma](http://bulma.io/) framework and design.
### 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](/CHANGELOG.md) for more details.
The biggest breaking change is obviously, **buefy does not work with Vue 2**.
### How to install
```sh
npm install buefy
```
## Features
- Keep your current Bulma theme / variables easily
- Supports both [Material Design Icons](https://materialdesignicons.com/) and [FontAwesome](http://fontawesome.io/)
- 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](https://material.io/)
- 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](https://buefy.org/).
## Quick start
You need [Vue.js](https://vuejs.org/) **version 3.0+**. (Vue 2 is not supported)
### 1 Install via npm
```bash
npm install buefy
```
### 2 Import and use Buefy
Bundle
```javascript
import { createApp } from "vue";
import Buefy from "buefy";
import "buefy/dist/css/buefy.css";
const app = createApp();
app.use(Buefy);
```
or Individual Components
```javascript
import { createApp } from "vue";
import { Field, Input } from "buefy";
import "buefy/dist/css/buefy.css";
const app = createApp();
app.use(Field);
app.use(Input);
```
### 3 Include Material Design Icons
```html
```
If you want to customize the icons or the theme, refer to the [customization section on the documentation](https://buefy.org/documentation/customization).
### Alternatively, you can use a CDN or even download
```html
```
**Currently, including `buefy` via `` is not working.**
Please see the issue [#221](https://github.com/ntohq/buefy-next/issues/221).
As a temporary workaround, add the following snippet before initializing Buefy:
```html
<script>
// we need this tweak because Buefy is not built for browsers
window.process = { env: { NODE_ENV: 'production' } };
```
### Installing Developer Release(s) from GitHub npm Registry to Access the Latest Features
To incorporate the latest changes from the development branch of buefy-next, you can install developer releases from the GitHub npm registry. However, proceed with caution as these packages may be deleted or retracted without notice.
Steps:
1. Generate a Personal Access Token:
Create a personal access token on GitHub with read access to the GitHub Packages registry.
2. Configure npm:
In your terminal, execute the following commands:
```bash
npm login --auth-type=legacy --registry=https://npm.pkg.github.com
USERNAME:
PASSWORD:
echo "@buefy:registry=https://npm.pkg.github.com" > .npmrc
```
3. Select a Developer Release:
Visit the Buefy package registry: https://github.com/buefy/buefy/pkgs/npm/buefy on GitHub.
Choose any developer release that suits your needs.
- Consider the features and bug fixes introduced in each release.
- Choose a more recent release if you need the latest features, but be aware of potential instabilities.
- Opt for a slightly older release if stability is a higher priority.
**Package Naming Conventions:**
Buefy developer releases follow a specific naming format:
```
@buefy/buefy@-
```
``: This represents the intended stable release version that the developer release will eventually be included in.
``: This part indicates that it's a developer release and includes a unique commit hash that identifies the specific code changes in that release.
**Due to the GitHub npm registry's requirements, the package name must be scoped; i.e., prefixed with `@buefy/`.**
4. Install the Package:
Copy the provided command from GitHub, which will resemble this:
```bash
npm install buefy@npm:@buefy/buefy@-
```
Alternatively, to fetch the latest release from the developer release registry, run:
```bash
npm install buefy@npm:@buefy/buefy@latest
```
**However, note it is not recommended to use the latest version of our developer release, as its stability fluctuates.**
Congratulations! You've successfully installed a Buefy developer release.
For further details on the GitHub npm registry refer to the [official GitHub documentation](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry#installing-a-package)
## Start On Cloud IDE
[https://github.com/buefy/buefy](https://github.com/buefy/buefy)
## Browser support
Recent versions of Firefox, Chrome, Edge, Opera and Safari. IE10+ is only partially supported.
## Contributing
Please see the [contributing guidelines](/.github/CONTRIBUTING.md)
## Versioning
Version will follow **v0.Y.Z**, where:
- **Y**: Major (breaking changes)
- **Z**: Minor or patch
## Core Team
Special thanks to Rafael Beraldo, the original author, and Walter Tommasi, a former core maintainter of Buefy.
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/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](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
## License 
Code released under [MIT](https://github.com/buefy/buefy/blob/master/LICENSE) license.
