# Buefy — Lightweight Vue.js UI Components Built on Bulma

> A collection of responsive Vue.js UI components based on the Bulma CSS framework, providing a simple and elegant design system.

## Install

Save as a script file and run:

# Buefy — Lightweight Vue.js UI Components Built on Bulma

## Quick Use
```bash
npm install buefy
# In your Vue app:
# import Buefy from 'buefy'
# import 'buefy/dist/buefy.css'
# Vue.use(Buefy)
```

## 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

---
Source: https://tokrepo.com/en/workflows/asset-28f6870c
Author: Script Depot