7 reasons to migrate from Vuetify to Quasar Framework

Quasar Framework and Vuetify are two VueJS frameworks offering very similar design principles and components heavily based on Google’s Material design. Vuetify tends to be the more popular option, but having used both extensively here are some key differences if you’re comparing the two.

1. Menu, tooltip, popup syntax

Scoped slots? Activators? That syntax from Vuetify is definitely not missed. Quasar’s syntax is just infinitely more natural, the element you want to popup is contained within the activating element.

Tooltips

Menus

Badges

Not the best example but stick with me! This becomes particularly chaotic when you need to combine a button with an icon, a badge and a menu for say… a notifications menu… a common occurrence in the single-page apps I’ve worked on.

There are a small handful of times where a button needs both a tooltip and a menu, this involves some named destructuring and that’s where it gets really messy.

2. Programmatic dialogs, notifications

An absolute must for single page apps and very convenient for form responses. With Vuetify it can be quite tedious to spawn dialogs/notifications from anywhere, basically having to actually place the component in the template and toggle it through use of v-model, this is further complicated when using outside of the Vue component instance, e.g. in Vuex.

The (3rd party) package vuetify-dialog goes some way in rectifying this, but is no where near as flexible and well maintained as the official alternatives from Quasar.

Take a look:

You can even provide completely custom dialogs by specifying the component prop. All options are available here.

Notifications are just as simple:

Neat, and really powerful when used from files like service classes, axios interceptors and Vuex.

3. All platforms in one codebase

Quasar handles the entire development experience, whether you’re developing for the web (SPA/SSR/PWA), mobile (Capacitor/Cordova), desktop (Electron) and even browser extensions, the tooling is provided and maintained by the Quasar team and integrates extremely well.

Modes are added through the CLI and is as simple as:

quasar mode add pwa
quasar mode add electron
quasar mode add ssr
quasar mode add capacitor

The config is all contained within the provided quasar.conf.js so you can run the entire stack from the same codebase.

You may then run each of the modes with commands like:

quasar dev -m pwa
quasar dev -m electron
quasar dev -m ssr

Components like q-bar make it easy to make title bars for desktop platforms:

4. Quasar CLI & Extensions

As briefly mentioned in the previous point, Quasar has a purpose built CLI which can perform most common actions, whether it’s running/building the server (quasar dev/quasar build), adding extensions (quasar ext add @quasar/extName) and modes, you should be covered.

You can even use it in an Angular-esque fashion, for example:

5. Performance

Quasar prides itself on being the most performance-focused framework and it definitely shows. Tree shaking is enabled by default and is automatic.

On switching from Vuetify to Quasar I have seen large project dev server startup times go from 90 seconds down to around 40 seconds, this is only further improved by the recent upgrade to Vue 3 and Webpack 5, soon to be Vite (as on the roadmap).

Every component that may contain a large number of rows has virtual scrolling/loading (data tables, select lists), a massive help in enterprise SPAs, reducing the need for pagination in some places.

6. Components for every purpose

Thought Vuetify had a huge selection of components? While it has caught up significantly, Quasar still tops it, including complex components like chat messages, WYSIWYG editors and splitters to name a few.

7. Other miscellaneous tooling and plugins

There’s so much more that could go in here but here are some special mentions.

Meta

Ever used vue-meta or missing Nuxt.js’ meta configuration for setting page meta/titles? Quasar has it covered with the Meta plugin, usage is basically the same as vue-meta:

Local/session storage

The built-in browser localStorage can be a bit tricky to work with, this built in plugin just makes it a little bit easier to interact with, especially when it comes to storing and retrieving objects.

Icon Genie CLI

Generates all the icon sizes and formats you’ll ever need for SPA/PWA/mobile/desktop from a single source file:

Date utils

The date util is quite capable:

Color utils

Includes some (self describing) methods like rgbToHex, hexToRgb, textToRgb, and processing functions like lighten, luminosity, brightness and changeAlpha.

Formatter utils

Human readable size:

Bonus: faster updates?

Quasar as of writing fully supports Vue 3, Webpack 5, Vuex 4 and Vue Router 4 with version 2 of the framework. Having recently migrated some huge apps to it (even the alpha was very stable), I can attest to the huge performance upgrades provided by the more recent versions.

Vuetify is working on Vue 3 compatibility however is only in an early alpha stage, with a significant handful of components missing from the package, form inputs, chips and tooltips to name some.

Conclusion

Both are two extremely capable frameworks at this point and you can’t go wrong with either, but Quasar has a real enterprise level feel to it and I would highly recommend as the lesser popular one!