Quasar Framework – is it the perfect Vue.js playground for app development? Spoiler yes it is!

Because of the simplicity and power offered to you out of the box. Quasar, with its CLI, is packed full of features, all built to make your developer life easier. Because it saves development costs drastically.

As a developer you often find yourself in a situation where the future needed to happen yesterday and the current technology just doesn’t cut it anymore. What to do? Depending on who is on the team, these outcomes can be vastly different despite the good intentions.

There will always be the “Let’s build it from Scratch” vs “I found a Package” if technical people are involved. My approach is a bit different in that I like to use both strategies to create a better product. So use established packages based on research and Build from Scratch any glue items needed to make it all work. This way as time progresses we can slowly remove the glue items as the technology advances and more features become available.

Step in Qusar, a Vue.js based framework with more than just a few tricks up its sleeve. What if I told you you can have the best of both worlds when it comes to a development framework? Sounds too good to be true? I know that’s what I said, and I was dead wrong. Quasar is my go to when starting a front end project now and here is why.

What is Quasar?

Quasar (pronounced /ˈkweɪ.zɑɹ/) is an MIT licensed open-source Vue.js based framework, which allows you as a web developer to quickly create responsive++ websites/apps in many flavours:

  • SPAs (Single Page App)
  • SSR (Server-side Rendered App) (+ optional PWA client takeover)
  • PWAs (Progressive Web App)
  • Mobile Apps (Android, iOS, …) through Cordova or Capacitor
  • Multi-platform Desktop Apps (using Electron)

Quasar’s motto is: write code once and simultaneously deploy it as a website, a Mobile App and/or an Electron App. Yes, one codebase for all of them, helping you develop an app in record time by using a state of the art CLI and backed by best-practice, blazing fast Quasar web components.

When using Quasar, you won’t need additional heavy libraries like Hammerjs, Momentjs or Bootstrap. It’s got those needs covered internally, and all with a small footprint!

Best practices integrated by default

Quasar was also built to encourage developers to follow web development best practices. To do this, Quasar is packed full of great features out of the box.

  • HTML/CSS/JS minification
  • Cache busting
  • Tree shaking
  • Sourcemapping
  • Code-splitting with lazy loading
  • ES6 transpiling
  • Linting code
  • Accessibility features

Quasar takes care of all these web development best practices and more – with no configuration needed.

Unparalleled developer experience through Quasar CLI

When using Quasar’s CLI, developers benefit from:

  • State preserving hot module reload (HMR) – when making changes to app source code, no matter if it’s a website, PWA, a Mobile App (directly on a phone or on an emulator) or an Electron app. Developers simply change their code, save the changes and then watch it get updated on the fly, without the need of any page refresh.
  • State preserving compilation error overlay
  • Lint-on-save with ESLint – if developers like linting their code
  • ES6 code transpiling
  • Sourcemaps
  • Changing build options doesn’t require a manual reload of the dev server
  • And many more leading-edge developer tools and techniques

Get started in under a minute

Having said this, let’s get started! You’ll be running a website or app in under a minute.