10 ms·

Buefy: UI Components for Vue.js Based on Bulma

159 points by octosphere 8y ago

dewey 8y ago
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 8y ago
  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.
AlphaWeaver 8y ago
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.
namanyayg 8y ago
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 8y ago
We use Buefy extensively to build moonlightwork.com. Thanks to the maintainers for working so hard on it and being so responsive!
neovive 8y ago
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 8y ago
  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'?
  - jacurtis 8y ago
    It's a vue component that is part of the framework. In this case it renders an input field that is customizable by passing props into the component.
  - garren 8y ago
    In the original link, the Buefy project describes itself as "Lightweight UI components for Vue.js based on Bulma". It seems like b-field is an example of such a component [0]. Looking at the documentation, this seems to be the case. If you're familiar with components in Vuejs, this is just a component in Vuejs. [0] https://buefy.org/documentation/field https://buefy.org/documentation/field
  - stefan_ 8y ago
    And why is it "is-danger" and has a message. Is this string based programming? What are we doing?
    - judge2020 8y ago
      This could probably be a future improvement for buefy, but it's just implementing the conventions Bulma uses. is-danger is a color modifier https://bulma.io/documentation/modifiers/syntax/ https://bulma.io/documentation/modifiers/syntax/
    - greenhatman 8y ago
      Seems very clear to me. What is the alternative?
      - jddj 8y ago
        That's the million dollar question. What's the alternative to declaring our UI using pseudo-html elements and string-matching on css class proxies from the currently-in-favour CSS framework which sits on top of the javascript framework of the moment which, after going through several transpilation steps to become plain old javascript, then sits on the client manipulating a shadow-DOM, to finally render plain old html? No idea. Hopefully some nice solutions will arise from other languages which compile to wasm - I would expect all the major players to be looking at coming up with something to that effect now that the world seems ready for Silverlight 2.0 and everyone loves writing frameworks.[1] Until then, any solution will unfortunately probably involve adding yet another level to the house of cards, maybe one which compiles down to buefy or the Vue bootstrap components.. [1] yeah, I see the irony in that it's just another stack which will probably be just as insane in many ways, but at least it will compile in less than 5mins.
bluewavescrash 8y ago
Wouldn't mind using Bulma if mixins were available for basic stuff like grid components.
tracker1 8y ago
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.
cubano 8y ago
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?
ydnaclementine 8y ago
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 8y ago
  We’ve been happy using buefy for our projects at Crowd Cow as well.
  - skilled 8y ago
    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.
rado 8y ago
This isn't lightweight.
- ng12 8y ago
  I think they mean that the library has no dependencies (it doesn't inflate your node_modules) and the components themselves are drop-in (no setup/bootstrapping).
- deleted 8y ago
  [deleted]
- jarym 8y ago
  Indeed, when I see 'lightweight' or 'simple' to describe something I'm usually expecting it to be not those things.
- deleted 8y ago
  [deleted]
- dang 8y ago
  Ok, we've made the title above less 'lightweight'.
  - ng12 8y ago
    Why editorialize the framework's own description?
    - dang 8y ago
      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.
RomanPushkin 8y ago
They need support, consider supporting them https://www.patreon.com/jtommy https://www.patreon.com/jtommy
- RomanPushkin 8y ago
  https://www.patreon.com/jgthms https://www.patreon.com/jgthms
mlevental 8y ago
but the point of bulma is that you don't need a framework?
- joevandyk 8y ago
  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”)`

159 points by octosphere 8y ago

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 8y ago
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.

AlphaWeaver 8y ago

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.

namanyayg 8y ago

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 8y ago

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

neovive 8y ago

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 8y ago
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'?
- jacurtis 8y ago
  It's a vue component that is part of the framework. In this case it renders an input field that is customizable by passing props into the component.
- garren 8y ago
  In the original link, the Buefy project describes itself as "Lightweight UI components for Vue.js based on Bulma". It seems like b-field is an example of such a component [0]. Looking at the documentation, this seems to be the case. If you're familiar with components in Vuejs, this is just a component in Vuejs. [0] https://buefy.org/documentation/field https://buefy.org/documentation/field
- stefan_ 8y ago
  And why is it "is-danger" and has a message. Is this string based programming? What are we doing?
  - judge2020 8y ago
    This could probably be a future improvement for buefy, but it's just implementing the conventions Bulma uses. is-danger is a color modifier https://bulma.io/documentation/modifiers/syntax/ https://bulma.io/documentation/modifiers/syntax/
  - greenhatman 8y ago
    Seems very clear to me. What is the alternative?
    - jddj 8y ago
      That's the million dollar question. What's the alternative to declaring our UI using pseudo-html elements and string-matching on css class proxies from the currently-in-favour CSS framework which sits on top of the javascript framework of the moment which, after going through several transpilation steps to become plain old javascript, then sits on the client manipulating a shadow-DOM, to finally render plain old html? No idea. Hopefully some nice solutions will arise from other languages which compile to wasm - I would expect all the major players to be looking at coming up with something to that effect now that the world seems ready for Silverlight 2.0 and everyone loves writing frameworks.[1] Until then, any solution will unfortunately probably involve adding yet another level to the house of cards, maybe one which compiles down to buefy or the Vue bootstrap components.. [1] yeah, I see the irony in that it's just another stack which will probably be just as insane in many ways, but at least it will compile in less than 5mins.

bluewavescrash 8y ago

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

tracker1 8y ago

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.

cubano 8y ago

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?

ydnaclementine 8y ago

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 8y ago
We’ve been happy using buefy for our projects at Crowd Cow as well.
- skilled 8y ago
  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.

rado 8y ago

This isn't lightweight.

ng12 8y ago
I think they mean that the library has no dependencies (it doesn't inflate your node_modules) and the components themselves are drop-in (no setup/bootstrapping).
deleted 8y ago
[deleted]
jarym 8y ago
Indeed, when I see 'lightweight' or 'simple' to describe something I'm usually expecting it to be not those things.
deleted 8y ago
[deleted]
dang 8y ago
Ok, we've made the title above less 'lightweight'.
- ng12 8y ago
  Why editorialize the framework's own description?
  - dang 8y ago
    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.

RomanPushkin 8y ago

They need support, consider supporting them https://www.patreon.com/jtommy https://www.patreon.com/jtommy

RomanPushkin 8y ago
https://www.patreon.com/jgthms https://www.patreon.com/jgthms

mlevental 8y ago

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

joevandyk 8y ago
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”)`