Buefy: Bulma UI Components for Vue 3

What Buefy solves for Bulma users on Vue 3

Bulma is a CSS framework: you write classes such as field, control and input by hand, and you own every piece of state that decides which class appears. Buefy keeps that styling model and adds the Vue layer on top, so a component decides the classes for you while your Bulma theme and variables stay in place. The README lists this first among the features: keep your current Bulma theme and variables easily. That is the whole pitch. If your team already has a Bulma theme, Buefy is a way to get Vue components without repainting the design. The audience is Vue 3 developers who chose Bulma deliberately, not developers shopping for a full design system. The README also states the library has no internal dependencies aside from Vue and Bulma, and puts the bundle at about 88KB min+gzip with Bulma included. Treat that figure as the project's own number, not a measurement.

How the components map onto Bulma classes

The repository is a workspace monorepo. The root package.json declares workspaces as packages/*, and the root package is private, so the published artifact is built from inside that tree rather than from the root. The README describes the output as semantic code, which in practice means the rendered markup is Bulma markup: the component renders the div and class structure Bulma expects instead of wrapping everything in generated class names. That is why an existing Bulma stylesheet continues to apply. Icons are a separate decision. Buefy supports both Material Design Icons and FontAwesome, and the README's quick start pulls MDI from a CDN link rather than bundling an icon font. Nothing in the README describes a theme provider, a design-token layer or a CSS-in-JS runtime, and that absence is the architecture: styling stays in Bulma's CSS, and Buefy supplies behaviour and structure.

Installing Buefy and rendering a first field

The README requires Vue.js version 3.0 or higher and states plainly that Vue 2 is not supported. Installation is one npm command.

npm install buefy

The quick start then registers the whole bundle on the app and imports the compiled stylesheet. Note that createApp is called with no root component in the README's example, which is abbreviated; in a real entry file you pass your root component.

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

const app = createApp();

app.use(Buefy);

If you would rather not register everything, the README shows the same pattern with named components. This is the option to reach for when bundle size matters more than convenience.

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

const app = createApp();

app.use(Field);
app.use(Input);

Finally, the quick start adds Material Design Icons through a stylesheet link, which is what makes icon-bearing components render glyphs instead of empty boxes.

<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css"
/>

After that, Field and Input are available in your templates. What you should see is Bulma's field and control markup with the classes already applied.

The CDN build is broken without a workaround

The README is unusually direct about a defect. It says that including buefy via a script tag is currently not working, and points to issue #221 in the ntohq/buefy-next repository. The documented workaround is to define window.process before Buefy initializes.

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

That comment is the project's own explanation: the distributed browser build expects a Node-style process object that a plain browser page does not have. If your integration path is a script tag on a server-rendered page or a no-build prototype, you are relying on a workaround the README itself frames as temporary. The npm path does not carry this caveat. This is the kind of limitation worth reading before a migration plan, not after.

Developer releases from the GitHub registry carry real risk

Buefy publishes a developer release for every commit pushed to main, distributed through the GitHub npm registry. The README's warning is explicit: these packages may be deleted or retracted without notice, and it says using the latest developer release is not recommended because stability fluctuates. The naming convention encodes the risk. A package is named @buefy/buefy@<package version>-<dev commit hash>, where the version is the stable release the change is intended for and the hash identifies the commit. The GitHub registry requires the package to be scoped, which is why the name is prefixed with @buefy/ even though the public package is plain buefy. Installing one means logging in against that registry and aliasing the scoped package onto the buefy name.

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

For production work, the released version on npm is the defensible choice. The developer channel is for testing a specific fix, and the README treats it that way.

Where Buefy is the wrong choice, and what to use instead

Two cases stand out. The first is Vue 2. The README states that Buefy does not work with Vue 2, and the changelog is where the Vue 3 breaking changes are documented, so a Vue 2 codebase cannot adopt the current release at all. The second is a team that wants a component library to supply its own visual language. Buefy deliberately does not: it inherits Bulma's design, and the README frames the library as following Bulma design plus some Material Design UX. If you have no Bulma investment and no intention of maintaining Bulma variables, you are adopting a CSS framework and a component layer at the same time.

The obvious alternative is Vuetify, which appears in the related searches as a direct comparison point. The difference is not quality, it is where the design lives. Vuetify ships Material Design as a complete system with its own components, theming and layout primitives, so you adopt its visual language and configure within it. Buefy assumes you have already chosen Bulma and want Vue behaviour on top of Bulma's classes. Pick Buefy to preserve a Bulma theme; pick Vuetify when you want the design system included. The README does not document a migration path between the two, so the decision is effectively made at project start.

Maintenance, versioning and the MIT licence

The repository is not archived, and the last push was on 2026-09-08. Releases are frequent: v3.1.0 on 2026-08-31, v3.0.11 on 2026-08-11 and v3.0.10 on 2026-07-30. Two maintainers are listed in package.json, which is a small team for a component library, and the developer-release channel publishing on every commit to main suggests the project leans on automated publishing rather than a long release train.

The versioning scheme is the part to read carefully before an upgrade. The README states the version follows v0.Y.Z, where Y marks breaking changes and Z marks minor or patch changes. That is the pre-1.0 convention, and it sits awkwardly next to a project whose latest release is v3.1.0. The README does not explain how v3.x maps onto v0.Y.Z, and the CHANGELOG plus MIGRATION-NOTE.md at the repository root are the files that carry the actual breaking-change detail. For upgrade cost, budget for Y bumps as breaking and check those two files rather than trusting the version string alone.

The licence is MIT, declared in both the README's repository metadata and package.json. MIT permits commercial and closed-source use. This is not legal advice; if you redistribute Buefy or bundle it into a product, have your own counsel review the LICENSE.md file.

Editorial conclusion

Buefy fits Vue 3 projects that already use Bulma or want its class-based theming, and it ships individual components if you prefer not to register the whole bundle. Skip it if you are on Vue 2, since the README states Buefy does not work with Vue 2, or if you need a component library with its own design system rather than Bulma's. Before adopting, check MIGRATION-NOTE.md and CHANGELOG.md for the Vue 3 breaking changes, and confirm whether you need the CDN build, which the README says is currently not working without the window.process workaround.

Frequently asked questions

Official sources

1. buefy/buefy on GitHub
2. License: MIT
3. Project website
4. README
5. Releases