Since only I’ve started with Vue.js almost 2 years ago – I knew it will be my main frontend framework.
I liked Angular but it was really fat that time. I was never fan of Facebook and even more I don’t like React (which on that time had slavish license).

Vue.js was tiny, easy and clean.
Since 2 years I had opportunity to use Vue in few projects.
In my very last project first time I used Quasar and here I would like to share 10 reasons why I think it’s good tool to be base of any Vue.js project.

Quasar vs Vue Cli

Before I heard about Quasar – I was using official Vue Cli tool. According to the website – ‘Standard Tooling for Vue.js Development’.
Basically it’s pretty easy tool for generating project structure, developing and building Vue.js application.
In pretty straightforward way it helps with integration of helpful libs and tools (like eslint, vue router, vuex). It provides the hot-reload web server to ease the development.
But generally that’s all. It’s minimalist and simply doing base job.

Quasar is more complex tool. Let’s say that it does everything what Vue Cli is doing and additionally provides a lot of very helpful features, configurations and setups out of the box in order to develop modern, multi-platform frontend application.

If Vue Cli can generate for you the Vue.js vehicle frame,
then Quasar can generate for you Vue.js car.
You just get in and ride.

10 features from Quasar

I will not describe why I think Quasar is cool, read their docs and decide whether you like it or not.
I will just list what it gives out of the box – what after all I belive is very helpful and/or reduces the time to setup the project.
Top 10 from my perspective:

1. Very good documentation

Quasar documentation is perfect place not only for someone starting with Vue.js but anyone starting with frontend development. It’s dedicated for the Vue ofcourse however since it covers almost every aspect of modern frontend application – any kind of frontend developer can benefit from it. If you feel chaotic in the frontend world, don’t know what are the basic elements, approaches, solutions for frontend development – take a look of the structure of Quasar documentation and I’m sure you will find it useful.

2. Multi platform build & features: mobile, desktop, web, SPA, SSR…

I think it’s one of the most strongest argument to use Quasar: it just provides a lot of hidden value behind the prepared configurations and setups for our applications. Doing cross-platform application, desktop application, setup of server side rendering – all of this require some setup and knowledge which is not the Vue.js responsibility at all. Quasar provides the ready-to-use configurations to setup desired project.

3. Material design components

The base of every frontend framework is UI components library, so everything the web page is built on: buttons, inputs, bars and whetever we can dream on. The complexity of UI and demands of user require to use the most modern, good looking and the performance best solutions. Material Design driven by Google is pretty good base of UI libraries, where the behaviour of UI elements is driven by some let’s say ‘philosophy’. No matter if you belive in that or you think it’s bullshit – it looks good and makes good impression. Quasar gives out of the box Material Design based library with maaany UI components (dedicated for Vue!).

4. File uploader

Everyone who has to ever dealt with files know that this topic is easy and complex in the same way. When I found out that Quasar has pretty nice built in file uploading component I immediately tested. It looks good and works great.
I saved some time because of that, that’s why it’s my Top 4.

5. Grid system

I already wrote about the Material Design and UI components, but since a lot of UI libraries/frameworks does not provide grid system at all – it’s common to integrate to the project dedicated grid library or… even doing it in pure CSS. Quasar has pretty nice grid system and a lot of dedicated css helper class (like aligning).

6. Development server

Development server (hot reload) is nothing extraordinary. Setting the application with Vue Cli also provides the dev server. However since some time
I noticed that standard Vue Cli dev server doesn’t work well. It’s my personal experiences – it hangs a lot and not working well. I didn’t notice any problems with Quasar dev server.

7. Stylus variables

Stylus varibales gives the possibility to change default settings of basic application style (like colors and font sizes of different UI elements). It gives possibility to really quick change of settings, not messing too much with CSS.

8. Built-in icons

Out of the box Material Icons, Font Awesome, Ionicons, MDI and IcoMoon. Ready-to-use.

9. Vue plugins

Plugins like i18n, Vue router, Vuex are already integrated in the basic Quasar project. I think it may safe some time to not setup it by yourself but what more important – may be useful for people starting with Vue who don’t know yet about the most popular plugins, which in fact sooner or later will be added to the project.

10. Platform detection

Have you struggled to detect whether it’s desktop, mobile or tablet? I did. One of Quasar helpers are platform detection variables.

Summary

I know Quasar since few days but I already like this tool. I found it very helpful and I think it’s great choice (to start with and master) for anyone who wants to build modern web app.
Do you have own experiences or thoughts?
Maybe bad experiences?
Share in comments!