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.
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.
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
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.
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 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
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';
/* ... */
render: h => h(App)
Then it's just
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.
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.
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'
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.
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
but for others you'll use classes on divs, for example
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!