Buefy — Lightweight Vue.js UI Components Built on Bulma

Introduction

Buefy brings the clean aesthetics of the Bulma CSS framework into Vue.js as a set of ready-to-use components. It keeps the footprint small by relying on Bulma for styling and adding only the JavaScript logic Vue components need.

What Buefy Does

• Provides 40+ Vue.js components following Bulma design conventions
• Includes form elements, tables, modals, notifications, and navigation components
• Supports tree-shaking so you import only the components you use
• Offers built-in icon support with Material Design Icons or Font Awesome
• Works with Vue 2 and has community-maintained Vue 3 forks

Architecture Overview

Buefy is a Vue plugin that registers components globally or lets you import them individually. Each component wraps Bulma CSS classes with Vue reactivity, handling state, events, and accessibility. No additional CSS-in-JS runtime is needed since Bulma handles all styling through utility classes.

Self-Hosting & Configuration

• Install via npm and register with Vue.use(Buefy) or import individual components
• Customize Bulma variables by importing the SCSS source before Buefy styles
• Configure default icon pack globally (MDI, Font Awesome, or custom)
• Set default component sizes, animation preferences, and locale
• Compatible with Nuxt.js via the official nuxt-buefy module

Key Features

• Clean Bulma-based design with no opinionated JavaScript styling layer
• Tree-shakable imports for minimal bundle size
• Comprehensive form components with built-in validation hooks
• Responsive table with sorting, pagination, and row details
• Programmatic API for toasts, snackbars, and modal dialogs

Comparison with Similar Tools

• Vuetify — Material Design system with heavier runtime; Buefy is lighter with Bulma aesthetics
• Element Plus — enterprise Vue 3 library with its own design system; Buefy stays close to Bulma
• PrimeVue — feature-rich with multiple themes; Buefy offers simplicity over breadth
• Naive UI — TypeScript-first Vue 3 library; Buefy targets Vue 2 with a simpler API

FAQ

Q: Does Buefy work with Vue 3? A: The main package targets Vue 2. Community forks like Oruga provide a similar API for Vue 3.

Q: Can I customise the Bulma theme? A: Yes. Override Bulma SCSS variables before importing Buefy styles.

Q: Is Buefy tree-shakable? A: Yes. Import individual components to reduce bundle size.

Q: Does Buefy include icons? A: It integrates with icon libraries but does not bundle icons itself.

Sources

• https://github.com/buefy/buefy
• https://buefy.org