Bootstrap vs Semantic UI vs Bulma for VueJS

Today I'm going to be introducing and comparing three modern front-end CSS based web and mobile frameworks for working alongside VueJS 2.

For each of the frameworks, I've used a companion library written by a third party which makes it easier to use the framework as part of your VueJS projects.

The versions I've tested are:

• Bootstrap-vue 1.5.1 (version 2 is coming very soon) with Bootstrap 4.1.1
• Semantic-ui-vue 0.2.8 with Semantic UI 2.3.1
• Buefy 0.6.5 with Bulma 0.6.2
• VueJS 2.5.16

As long as the major versions remain unchanged, this article should still be relevant.

I've included some code samples for items relevant to getting started, but please don't take this as a complete foolproof guide as I've not included everything to start a new project for brevity.

Pre-requisites

For this article you'll need to have nodejs/npm installed (ideally a recent version with the excellent npx binary), parcel and VueJS. Optionally the vue-cli is useful for creating new projects.

Bootstrap

Bootstrap has been around a long time in terms of web development, and the latest incarnation improves upon the excellent framework they've crafted thus far. For many people, it's the default choice.

Version 4 has many improvements and changes, most notably: support for Internet Explorer 8 has been dropped, flexbox support by default, move from less to sass, move from pixels to relative units like rems. Custom builder, glyphicons and grunt have all been dropped; simplying use sass to include what you need from bootstrap, and you're free to choose your own icon set and build tool, although npm scripts are recommended.

Getting started

The guide in the bootstrap-vue docs is quick and easy when you use the vue-cli to start a new project. If you've got a recent version of npm, then you can shorten the number of commands by one by running

npx vue init bootstrap-vue/webpack-simple your-project-name-here

then the usual

cd your-project-name-here
npm install
npm run dev

Easy peasy! I would prefer using parcel to avoid any complex webpack setup, but webpack is more widely known so you'll have more support and you get an autogenerated config file that should be fine for most use cases, so there's no major issue there.

Verdict

It's hard to argue with something that just works brilliantly. If you want a huge amount of community support, themes and customisations, then you're all set with Bootstrap. There's nothing really wrong with it, so if you're happy with bootstrap then I wouldn't recommend changing.

The main downside is that bootstrap still requires jquery for all it's javascript needs. For many people this is fine, but since we're talking about using Vue it seems a shame to have to load jquery for all the bootstrap interactions and have the rest of your app written in the more modern Vue framework. This is just a compromise you'll either have to accept, not use any of the javascript based behaviours or more on to an alternative.

Semantic UI

The goal of Semantic UI is to provide a more natural language orientated approach to styling and interacting with you front-end. The names of the classes make it easier to understand and remember what styles to use, for example, "ui active button" for a semantic ui active button, what could be easier than that?

I'm not a big fan of their docs, the installation page seems complicated, then you're just left with a list of pages on the left with no clue where to start. I would have preferred a proper getting started page after installation that gave you a container, or grid, then some typical starter ui elements like headers, paragraphs, buttons, etc, but that's just personal preference

Getting Started

The process for starting a new project is a little more complicated than with Bootstrap-vue, in that you need to start the project yourself, build the files using gulp, but in reality it's not that big of a deal. The npm installer for semantic ui has a really nice question-answer driven system for getting the files installed where you want them, but personally I would have preferred an opinionated installer that just puts everything in the usual place in the node_modules folder. It's consistent with all other packages and just makes it easier to use it between projects. Keep it simple!

npm install semantic-ui-vue --save
npm install semantic-ui --save

and here's your starter index.js

import Vue from 'vue';
import SuiVue from 'semantic-ui-vue';
import '[path-to-semantic]/dist/semantic.min.css';

/* ... */

Vue.use(SuiVue);

new Vue({
    el: '#app-root',
    render: h => h(App)
});

Then it's just

npx parcel

The problem I encountered was that I had to run gulp watch inside the semantic folder in case of any changes to my customisations, which made it awkward to have that and run parcel for the rest of my project. I'm sure that's a solvable problem and might just have been where I installed semantic ui, so you might have better luck. For me, this left a bit of a bad taste in the mouth. I would assume you could write a gulp file to watch both your sources and the semantic ui files, but I didn't want to have to do that.

Verdict

I love the nomenclature, it feels easier to use when you've only got simple english names for everything. It's a well known framework and there are many themes and customisations but nowhere near the number for Bootstrap. As for downsides; the need to setup gulp manually or parcel differently and that the behaviours utilise jquery are making me lean towards something else, but if you're happy with that and prefer the easier class names, then I would recommend Semantic UI.

Bulma

Bulma is the least well known of the three frameworks I've decided to compare, but this doesn't bother me. I really liked the fact that it's based on flexbox, and that there's no javascript included so you can make a pure Vue (or React) project. Like Semantic UI, they are aiming at easier to remember class names and a simpler usage. For example, to use their grid columns you can simply have a "columns" div containing "column" divs, that's it. They automatically resize according to the number, which is great and really highlights the power of flexbox. For some reason they prefix some of the classes with "is", so you have "button is-primary is-large" which doesn't look quite as nice as Semantic UI but it's no biggie.

Getting Started

The process of getting started using Buefy was nice and easy and worked fine with parcel.

npm install buefy --save

Then your index.js file can start like this

import Vue from 'vue'
import Buefy from 'buefy'
import 'buefy/lib/buefy.css'

Vue.use(Buefy)

new Vue({
    el: '#app',
    render: h => h(App)
});

Customising the theme was also easy, just remember to remove the 3rd import above as it's replaced in your App.vue file. As it's part of your app, there's no need to run gulp or anything else separately to parcel.

Verdict

I really liked Buefy, it was easy to setup and use, but the main downside for me is that there's only a subset of Bulmo implemented in Buefy, so for some code you'll use Buefy components like

<b-checkbox>A checkbox!</b-checkbox>

but for others you'll use classes on divs, for example

<div class="container">...</div>

I assume this is because they don't have any javascript requirements, or that the project just hasn't implemented them, but as it stands I'm not so keen on the mix of the two, it would have been nice to have a consistent set of components to use.

Overall

All three of the frameworks would be a great choice for most projects so really it's down to personal preference. For me, I like the simplicity of Bumla/Buefy so I'm going to give that a go and I'll do an update in future to let you know how it goes.

Thank you very much for reading this article! If you liked it, please comment to let me know or if you have any suggestions for improvements; and make sure to click the heart/unicorn/bookmark buttons below, I would really appreciate it!

Comments

[rhymes]

Hi Sam,

thanks for the article.

Back in the day (which is only five months ago) I was trying to figure out which framework to use (I had also considered Vuetify and the other material based frameworks) and chose Buefy. I've been liking it. The main issues I have with it are:

• zero tests. Regressions are normal even for tested code so if it's not tested you're bound to have some and it actually happens sometimes in the releases (they are planning to have them for the 1.0 release)

• you can't use components a-la-carte. There is no way to bundle in your final JS only the components you're actually using (don't think they'll do it soon)

Bootstrap-vue 2 has both as far as I know and it also doesn't depend on jQuery but I guess that if you want to use one of the components made for standard bootstrap then you have to include jquery... but maybe you can avoid them!

[Sam Benskin]

Thanks for the comment. Yes the lack of testing does worry me, but it's good to know they are addressing that missing piece of the jigsaw. At least you can lock down the version you want and know works and can upgrade in safety only committing if you know it all still works through you're own testing, but nothings foolproof.

There's certainly a large number of frameworks out there, these are the ones that looked the most interesting to me but I'll be sure to have a look at the ones you've mentioned, thanks.

I'm not too worried about the lack of component bundling customisation but it's good for people to know these things.

[T Morehouse]

BootstrapVue doesn't require jQuery. All of the custom Bootstrap components have been converted to Vue.JS components

[Sam Benskin]

Thanks for the update. This article was written nearly a year ago now so I'm not surprised things have changed for the better 😀 but thanks for letting everyone know!

[T Morehouse]

Actually BootstrapVue has never relied on jQuery.

[Sam Benskin]

Thanks for letting me know, I'll update the article when I get a chance 😀

[Paweł Świątkowski]

I'm a huge fan of Semantic UI not because of class naming but for how beautifully it looks by default (since I'm no designer, it's important to me). So, I'm willing to ignore problems with installation. The only problem I see is that there is no recommended way how to keep Sematic UI in your repository - should I keep it's files in separate one and put built bundles in my project's assets? Or do I include all the huge codebase of Semantic in my projects repo? They could finally figure it out ;)

That being said, I might give Bulma a go in a project I'm starting right now. It looks like the thing I need - just cool CSS defaults without overly complex javascript part. So thanks for pointing me in its direction (I actually haven't heard of it before).

[Sam Benskin]

I completely agree with the missing folder structure recommendation. I think when they originally did it they tried to make it as flexible as possible but there's no good reason for that, it just adds complexity. What's wrong with it belonging in node_modules like everything else and customisation the theme etc through your own code.

Definitely give Bulma a try and come back and let us all know how you got on

[Richard Tallent]

Great article! I was a fan of SemanticUI before I started using Vue, and I’ve been slowly extricating myself from it because of the JQuery dependency and the project stagnation.

I’ve settled now on a Bulma CSS (not Buefy) and custom components. Bulma is a great baseline, and Vue makes reactive component interactions so easy that I don’t feel the need for a straight-line implementation like Bulma.

Bulma lacks a few things (a nice color palette like Vuetify’s for example, and non-native checkbox/radio controls), but it’s also tiny, fast, and generally doesn’t get in the way of my own CSS (a problem I had with Vuetify when I didn’t care for certain design choices in Material).

[Sam Benskin]

Thanks! :) I'm happy you found the article useful.

Out of interest, why didn't you try/use Buefy? On their website they have examples of non-natice check boxes that I mentioned in the article so you might want to check it out.

I'll take a look at Vuetify, thanks.

[Richard Tallent]

I thought Buefy was nice, but it felt like too thin a veneer over some divs and classes I could easily create myself... and I needed to learn Bulma anyway since Buetify doesn’t cover the entire footprint of Bulma. Vuetify is a very solid toolkit, I’m using it for a personal project where I need something more complete for a mobile-first site.

[Sam Benskin]

Thanks, I'll take a look at Vuetify; at first glance it looks interesting. I think the bold material design works very well on Android, but on a desktop site I'm yet to be convinced. I'm aware it's not all bold colours and boxes though. Thanks for the recommendation!

[shaileshphansalkar]

Hi,

I have been trying to figure out if semantic-ui-vue has all the functionality that semantic-ui does. For example I am struggling to do form validation when I use semantic-ui-vue and VueJS.

Also a side note, I found this brianyang.com/bootstrap-vs-semanti...

It seems to be an exact copy of what you have posted!

-S