buefy/buefy

Buefy is a lightweight library of responsive UI components for Vue.js based on Bulma 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 for more details. The biggest breaking change is obviously, buefy does not work with Vue 2.

How to install

npm install buefy

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 buefy

2 Import and use Buefy

Bundle

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

const app = createApp();

app.use(Buefy);

or Individual Components

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

<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/@mdi/font@5.8.55/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/css/buefy.min.css" />

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

Currently, including buefy via <script> is not working. Please see the issue #221.

As a temporary workaround, add the following snippet before initializing Buefy:

<script>
    // we need this tweak because Buefy is not built for browsers
    window.process = { env: { NODE_ENV: 'production' } };
</script>

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:

   npm login --auth-type=legacy --registry=https://npm.pkg.github.com
    USERNAME: <their GitHub username>
    PASSWORD: <personal access token issued at Step 1>
   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@<package version>-<dev commit hash>
   

   <package version>: This represents the intended stable release version that the developer release will eventually be included in.

   <dev commit hash>: 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:

   npm install buefy@npm:@buefy/buefy@<package version>-<dev commit hash>
   

   Alternatively, to fetch the latest release from the developer release registry, run:

   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

Start On Cloud IDE

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

Versioning

Version will follow v0.Y.Z, where:

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

Core Team

Kikuo Emoto

Wesley Ford

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):

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.