I'm loving VueJS, I read the guide, went through the entire Udemy course Vue JS 2 - The Complete Guide, did my exercises and demo apps and now I would like to use it for the app I "hinted" to here.
Going through VueJS material I spent half of the time saying to myself "This is magic!!" and "If only I had this and that the last time I built a web app with jQuery".
Now I've decided I'm going to build the app as a SPA with VueJS.
So, the time has come to choose a UI framework on top of Vue or... not. Which brings me to the reason of this post: I'm lost because there are too many options.
Frameworks Fatigue?
There are so many of them: desktop oriented, mobile oriented, hybrid apps, all of the above in the same framework, Material based (so many!!!), Material inspired, Bootstrap 4 based, Bulma based, diy frameworks, and so on.
Googling I found: Vuetify, Buefy, Vue-Material, Bootstrap-Vue, Element, Keen UI, Onsen UI, Quasar, Framework 7, Weex and others. This recent comparison lists ELEVEN frameworks: 11 Vue.js Component Libraries You Should Know In 2018
What I would like to know
Unfortunately comparisons like that are good for a general idea but they don't really tell me anything about working with those libraries in the long run.
I have noticed there's a Vue community here and maybe some of you have real world experiences to share.
What the app is going to be
The app it's going to be an admin style app to manage server side data, upload images, input data with forms and wizards and give feedback to the user and output stuff. Sorry if I'm not very specific :-)
What I know
I'm familiar with Bootstrap 3 and 4 (not that original in this department...) but I don't mind learning Material or Bulma. Even though I think Material design looks nice only on my Android phone...
Where I'm at
I tried to make Quasar play nice with my Flask backend but nothing came out of it. It seems nice but it's an all or nothing framework, and I don't have enough webpack knowledge to customize everything.
It seems that Element and Vue Material are not really responsive which is kind of a bummer in 2017.
What I would like
I would like a framework/component library that is easy to use and responsive. I don't mind picking and choosing standalone components to integrate in the app.
What I realised writing this post
I'm starting to think that I'm left with two main choices:
- Boostrap Vue based on Bootstrap 4 responsive framework
- Buefy based on Bulma responsive framework
plus other third party components if needed
Top comments (12)
You should definitely take a look at the offerings at creative-tim.com/bootstrap-themes/.... Dashboards already built in Bootstrap and Vue. Not sure if they used Bootstrap Vue.
I'm struggling with a similar issue a most of my app will be a dashboard, but the PWA part needs a different UI and may need to be just done separately.
Thanks, for now I'm using Vue + buefy + a few other components.
Let's see how it goes, it's my first Vue app :D
Quasar is not a bad choice, it's very professional and the founder is clearly ambitious and invests a lot in improving it. It's fully responsive and suitable for desktop, web and mobile (they even have tools to integrate it with Electron and Cordova, allowing you to build desktop or mobile apps with the same code base).
I'm using Quasar for a web app (with a node/express/FeathersJS backend) and it works well. It supports 2 themes (Material/Android and Apple/iOS) and if you make a mobile app it will automatically select the correct platform theme. (It would be nice IMO if they would supply a third "neutral" or "web" theme, Material and iOS look very 'standard'.)
I've worked with Ionic before (Angular based) and it looks like Quasar is trying to be sort of the Ionic of the Vue world.
What problems did you have with Quasar? Most of the time the complicated part of integrating with a backend API is the authentication (with cookies or tokens and JWT and so on). Maybe you should look at their latest version, it's easy to use and doesn't require any Webpack knowledge (anymore).
But I think Bulma is also nice, it looks clean and fresh, I've evaluated it against Bootstrap and I'm now inclined to go with Bulma for another web app.
Hi leob, thanks for the comment.
Quasar seems really nice yes, but at the moment I was waiting for the new major version and it looked, from a total newbie perspective, a little bit "big". We didn't need a mobile look, just to be responsive.
In the end I choose Buefy though I'm not totally happy because they have no unit tests (and it sometimes breaks for that) and they have no component architecture that allows you to import only the parts you need (which results in a big bundle)
I would probably lean towards bootstrap-vue.js.org/ if I were to start now.
Bulma by itself is great by the way! I think it's even easier than Bootstrap
I see, Buefy is a "Vue port" of Bulma right?
At the moment I'm getting up to speed with Bulma, using React. I'm just importing the CSS (via SASS, which allows me to import only the parts of Bulma which I need) and then I create the React components myself. With Vue that would also be pretty easy, I mean you don't absolutely need a library with the component wrappers, it's pretty easy to build them yourself.
Anyway, yes I like Bulma, in the beginning the docs don't seem as organized as Bootstrap's docs and the terminology isn't always clear, but it has some powerful components (levels, tiles, etc). Have been trying out Bulma and Bootstrap with React, but I decided to go with Bulma.
Quasar is pretty "big" indeed, however with Quasar you can also use only the parts you need, and it's even easier to optimize because it will let Webpack do the "tree shaking" for you. It's pretty advanced, the only thing I like a bit less is that there are just the 2 official themes (Material and iOS) which means every Quasar app tends to look more or less the same.
My take on it is that Quasar is more for "apps" (whether mobile or desktop) and Bulma or Bootstrap are more for "websites" (but there's a big grey zone between the two of course).
I've worked with element.eleme.io/ and have absolutely loved it.
I do not understand why did you write that Vuetify.js is not responsive. I got a heart attack reading that.
Billal Begueradj
Hi Billal, yeah I was wrong a year ago :)
The app ended up using Buefy which was nicer than Bootstrap UI wise and the fact that didn't look like a Material app was a plus.
I used Vuetify for another project later on and I can confirm it's responsive.
I'll update the article, thank you
Hope my comment did not sound rude, that is just a funny way to say things in MY culture :)
Thank you for sharing your knowledge and point of views.
No, not at all! Thanks for catching the error!
I agree ! Way too many options many of them lacking components. Quasar is the most complete IMO.
I'll consider it again the next time I find myself in that predicament :D thanks Geza!