$ show buefy/buefy
Buefy is a Vue 3 UI component library providing approximately 40+ Bulma-based components (buttons, inputs, tables, modals, datepickers, carousels, trees, etc.) that can be consumed individually or as a full bundle. It includes programmatic APIs for overlay components (dialog, toast, notification, snackbar, loading) and a global configuration system for icon packs, locale, and default behaviors. The library is published as the `buefy` npm package and is designed for tree-shaking via individual component registration. The architecture is a monorepo with two packages: `packages/buefy` (the library) and `packages/docs` (a Vite-based documentation site). Components are built using Vue 3 Options API with `defineComponent`, mixins for cross-cutting concerns (form validation, tabbed containers, notice behavior, compat fallthrough), and a consistent prop/event/slot pattern. SCSS styles are organized per component and leverage Bulma's CSS variable system for runtime theming. The library does not handle external data; it only manages UI state and provides a structured way to build Bulma-themed Vue 3 interfaces. Key entry points include `packages/buefy/src/index.ts` (main library export), `packages/buefy/src/utils/config.ts` (global configuration), and per-component index files that register each component as a Vue plugin. Data flows are limited to parent-child communication via provide/inject (e.g., Tabs, Steps, Table) and form element integration with a `BField` parent for validation. External dependencies include Vue 3 (>=3.4), Bulma CSS framework, and optional icon packs (Font Awesome, Material Design Icons). Build tooling uses Rollup, esbuild, Babel, and Vitest for testing.
The LLM identified 6 files worth highlighting for reuse:
Standalone Color class with RGB/HSL conversion, hex/rgba/named color parsing, and a comprehensive named-color dictionary. Could be extracted into any project needing color manipulation without modification.
Vue directive to detect clicks outside an element. Self-contained and reusable in any Vue 3 project for implementing dropdowns, modals, or popovers that close on outside click.
Vue directive to trap keyboard focus within an element, essential for accessible modals and dialogs. Self-contained and directly reusable in any Vue 3 project.
Generic debounce utility function. Simple, self-contained, and applicable to any JavaScript project for rate-limiting function calls.
Generic Vue mixin implementing a provide/inject pattern for parent-child component communication. Used by Tabs, Steps, Table, and Carousel. Could be extracted for any hierarchical component setup requiring child registration and parent notification.
Vue mixin that controls fallthrough of attributes (class, style, id) to root or inner component, easing Vue 2 to Vue 3 migration. Demonstrates deep understanding of Vue's attribute inheritance and provides a clean compatibility layer.