
Buefy: UI Components for Vue.js Based on Bulma - octosphere
https://buefy.org/
======
neovive
I've been using Buefy for about a year for two projects and it provides a nice
set of drop-in components for projects within the niche of Bulma/VueJS users.
The project is very well designed and documented and easy to customize. Note:
The original author, @rafaelpimpa, recently transferred maintenance over to
jtommy.

If you happen to fall within the aforementioned niche, Buefy is definitely
worth a try. The Form components alone are worth their weight in kilobytes and
greatly simplify your templates. The components, props, and events use logical
naming conventions and the examples in the docs work out of the box and are
easy to customize.

I love how readable this is as opposed to a series of nested divs and classes:

    
    
        <b-field label="Email"
            type="is-danger"
            message="This email is invalid">
            <b-input type="email"
                value="john@"
                maxlength="30">
            </b-input>
        </b-field>
    

If you only need one or two components you can import where needed:

    
    
        import { Table } from 'buefy/dist/components/table'
        import { Input } from 'buefy/dist/components/input'

~~~
TicklishTiger
I have been building websites for most of my adult life. And I use Vue for
some projects. But I have no clue what this is about. What is a 'b-field'?

~~~
stefan_
And why is it "is-danger" and has a message. Is this string based programming?
What are we doing?

~~~
lbotos
This is what modern front-end UI programming looks like now. It's... weird.

------
ydnaclementine
Just want to shoutout bulma and buefy as a user. I used bulma for a side
project and had to write very little custom css. Best feature for me for bulma
is that you can just override the colors with sass variables. Not as fully
featured with things as other frameworks (bootstrap), but covers a ton of use
cases.

~~~
joevandyk
We’ve been happy using buefy for our projects at Crowd Cow as well.

~~~
skilled
Just letting you know that a popup 2 seconds after entry is a bad idea. In
fact, your popup says, "it's nice to meat you".

Sure, maybe we just met (2 seconds ago) but we sure as hell are not jumping
into the bed that quick.

You know what I mean? Made me close the page immediately.

------
AlphaWeaver
Just wanted to say, I've used Buefy and am a big fan. Makes it easy to throw
together a Vue project that looks really good fast.

------
tracker1
Buefy is definitely interesting, and if your site is more geared towards
mostly-read content something like this or bootstrap may work better. For more
application-like features, I'm much more a fan of React with material-ui.

------
RomanPushkin
They need support, consider supporting them
[https://www.patreon.com/jtommy](https://www.patreon.com/jtommy)

~~~
RomanPushkin
[https://www.patreon.com/jgthms](https://www.patreon.com/jgthms)

------
dewey
A beginner question as someone who just started fiddling around with frontend
development. I'm currently using Vue and Bulma but I got it with "npm install
bulma" and not via these components. What's the advantage of using this over
just using the "normal" Bulma with the normal tags and just using the Bulma
class names?

~~~
namanyayg
It's a neat layer of abstraction, you don't have to remember or write as many
classes. Form elements are handled conveniently too, with v-model bindings.

------
cubano
I'm no expert on frontend techstacks, but I thought Vue was an application
development framework, not what-looks-here like a jQuery replacement for DOM
validations and manipulation?

As far as I can see, it is basically doing almost exactly what jQuery does in
Bootstrap...can someone perhaps set me straight with this?

------
namanyayg
Used the library for a bunch of production projects for clients, it's great.
Allows you to work fast. Has a better look than the material or bootstrap
templates that are all too common.

------
philip1209
We use Buefy extensively to build moonlightwork.com. Thanks to the maintainers
for working so hard on it and being so responsive!

------
bluewavescrash
Wouldn't mind using Bulma if mixins were available for basic stuff like grid
components.

------
rado
This isn't lightweight.

~~~
dang
Ok, we've made the title above less 'lightweight'.

~~~
ng12
Why editorialize the framework's own description?

~~~
dang
The HN guidelines call for changing the original title when it is either
misleading or linkbait
([https://news.ycombinator.com/newsguidelines.html](https://news.ycombinator.com/newsguidelines.html)).
When users complain that part of a title is misleading, we usually change it,
especially when there's a bit of baitiness in there too.

A lot of projects/products get posted to HN with promotional titles. If we
always went with their own descriptions, HN's front page would be a lot
noisier and less to our readers' taste. They prefer factual and neutral
language.

It's true that the word 'lightweight' in the title above wasn't that bad, but
if one reader complains, it's likely that some others feel the same way. We've
learned to trust such community reactions.

~~~
ng12
I see, thanks for the explanation.

------
mlevental
but the point of bulma is that you don't need a framework?

~~~
joevandyk
This integrates bulma css components into vue’s JavaScript framework, so you
don’t need to write the html/JavaScript code that displays, say, a dialog
prompt, you can just write `Dialog.alert(“hey”)`

