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 ea...
For further actions, you may consider blocking this person and/or reporting abuse
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).
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.
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.
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!
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!
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.
BootstrapVue doesn't require jQuery. All of the custom Bootstrap components have been converted to Vue.JS components
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!
Actually BootstrapVue has never relied on jQuery.
Thanks for letting me know, I'll update the article when I get a chance 😀
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).
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
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