I started Vue with Bootstrap 4, want to switch to native design framework. Quasar or Vuetify?

Hello, I added Vue reactivity to a one page of my exiting app that was built on ASP.Net Core 3.1 Razor Pages with classic Bootstrap 4 and I liked Vue very much!

So, now I willing to re-write my app for the Vue entirely and I want to switch away from Bootstrap to the something else.

What I disliked of the Bootstrap most: too big interface representation. Basically everything like buttons, tables and text are too big by default. My data-dense content does not fit very well to this style. Another drawback is relatively limited selection of UI elements. For that reason I do not consider BootstrapVue anymore.

What you guys do usually prefer? I found Quasar and Vutify looks nice. Quasar site, docs and UI scale (seems a bit smaller) appealing more to me. Right choice?

1 Like

Hi, I have been programming for 30 odd years but I am no expert in Vue. I have been using it with NodeJS at the back end for about a year. The app is used internally by about 100 users, so it is not a typical web app, but it has been quite well received. I had similar issues with default button sizes. I solved it using styles in App.vue which can then be used on my other components eg

<style  lang="stylus" >
  .Smaller_Button {
  text-align: left;
  font-size: 12px;
  width: 50px;
  height: 20px;
  padding: 0px 0px;
  margin: 5px
  }
  .UpdateButton {
@extend .Smaller_Button;
background-color:  blue;
  }
  .CancelButton {
@extend .Smaller_Button;
background-color:  red;
  }
  .ApproveButton {
@extend .Smaller_Button;
background-color:  green;
  }
  .RejectButton {
@extend .Smaller_Button;
color: black;
background-color:  pink;
  }

  .Bigger_Button {
text-align: left;
font-size: 14px;
width: 120px;
height: 50px;
padding: 1px 1px;
margin:30px
  }
  .ReSubmitBigButton {
  @extend .Bigger_Button;
  background-color:  light-blue;
  }
  .CancelBigButton {
@extend .Bigger_Button;
background-color:  red;
  }

Like you I realised the error of my ways now, and wish I had used Vuetify from the start. The material design example looks like it would fit my app well. At some point I will convert the app. However, my reason for conversion is more around getting better automatic re-sizing on different screen sizes and also better handling for modal dialogs, etc, rather than purely button sizing.

I am not familar with Quasar. One thing to check would be that it supports Vue3 which is coming out soon. I know that Vuetify will.

Regards

Paul

1 Like

I had the exact same dilemma. After following them both for months and extensive research, I chose Quasar. Pretty much more of everything. Also, Vuetify creates bigger interface elements generally.

1 Like

I avoided Bootstrap because it mess up css generally.
I avoided Vuetify because i don’t like adding foreign syntax to my code.
I found PrimeVue very pleasant to work with because its purely Vue Component, and you can just add and remove everywhere you want without messing up anything else.

Hi
I was in the same dilemma: what to choose Quasar or Vutify?

I started with Vutify and this was a nice component library, then I took another online course based on Quasar and then I switch to Quasar. Quasar is more a complete framework, where Vutify is more a component library.
Hold on
I suggest that you pick one of them, take some online training and keep building small apps and hold on to your selection until you really hit the wall.

Regards
Michael

1 Like

Agree, will do. I was just curious, what are well-known pros or cons, there is a only way to ask a community.

HI, I will give you the counter argument. I selected Vuetify over Quasar. Here’s why.

I was initially drawn to Quasar because I wanted to write one code base and have web and native mobile come out the back end without much effort. I can’t afford to re-write my entire code base to get native mobile apps and I definitely can’t do it three times to support web, iOS and Android. So found Quasar and thought that was going to be the perfect solution.

I started building my app with Quasar. Then I realized that native app support was just using cordova and I realized that there were many solutions to putting a Vue app into cordova. So at that point it took away my perception that Quasar had the native platform advantage. Since then, I have decided that I would use NativeScript for my native apps.

So I re-evaluated Vuetify vs Quasar. I ended up selecting Vuetify. They seemed to have a very similar set of UI components. Neither really won on that front. I made sure that the UI elements I would need were available on both. They were.

I had already spent a month or two in the Quasar world and on their discord server. It was here that I realized they are a very small team trying to do a huge amount of stuff. They need way more help to do everything they are trying to do. Hopefully the team will grow and they will get there. This was the first strike against them. And with Vue 3 coming out, I wonder how long it will take them to fully support.

To me Vue 3 is critical. I do everything in Typescript and Vue 2 + Typescript sucks. Vue 3 + typescript is quite nice. So as soon as I can get on to vue 3 proper and off the composition API plugin the better.

The second strike against Quasar was unit testing. They don’t (or didn’t at the time) have unit testing of their library. I am a firm believer in the benefits of unit tests. The app I am porting has around 7000 unit tests for the front end alone and another 10,000 on the backend. Vuetify has unit tests for their components. I have gone and looked at them and stolen some ideas of how to unit test my components from them.

The third strike against Quasar was its divergence from Vue. Since they are trying to be a complete framework, they encourage you to use the Quasar CLI instead of the Vue CLI and I think that will bite people in the end, especially when Vue comes out with new versions. I think this coupled with the small team of Quasar will cause this to be an issue.

So given all that, I chose to go with Vuetify. Now I really hope that Vuetify comes out with a Vue 3 version within weeks of Vue 3 becoming officially released.

I admire the Quasar guys for building something great. For me, building a commercial product, I wanted something I could trust a bit more.

1 Like

I started with Vuetify and then after about 2 months I found Quasar, which I’ve been using for about 3-4 months now. I like it better for the fact that it takes much less CSS tinkering to get that customized look that I want. It has its quirks just like any framework does, but in the end I’m producing less code to accomplish what I want.

Quasar also has a lot of useful app extensions and components that you can plug in easily. Quasar App Extensions

There’s also Quasar Awesome which includes lots of articles, video tuts and community contributed plugin components.

And also there’s the fact that Quasar includes and support for building for many different platforms very easily, including support for SPA, PWA, Server Side Rendering (SSR), Hybrid Mobile - AND - Electron for building multi-platform desktop apps.

Hope that helps.