TypeScript icon, indicating that this package has built-in type declarations

0.1.0 • Public • Published

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

About this branch

This branch buefy-next aims at being Buefy for Vue 3. The branch departed from the latest commit #b6233b9c335d99cf688ee2a3b9c61fd26a92a182 on the dev branch as of July 4, 2023.

Initial migration goal

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

Due to focusing on the documentation pages:

  • Unit tests have not been updated at all.
  • Extensions have not migrated.
  • 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.

How to install

To install this fork, please run the following command,

npm install https://github.com/buefy/buefy#buefy-next


  • 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


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/buefy/buefy#buefy-next

2 Import and use Buefy


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

const app = createApp();


or Individual Components

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

const app = createApp();


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

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

Start On Cloud IDE


Browser support

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


Please see the contributing guidelines


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




Apolokak Lab


Antério Vieira


Jorge Nieto


Mateus Machado Luna


All contributors

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


Code released under MIT license.

Package Sidebar


npm i @dword-design/ntohq-buefy-next



Weekly Downloads






Unpacked Size

8.46 MB

Total Files


Last publish


  • dword-design