Quasar Framework — Empowering your websites and apps(all using the same codebase)

Quasar (pronounced /ˈkweɪ.zɑɹ/) is an MIT licensed open-source framework (powered with Vue) that helps web developers 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 Apache Cordova
  • Multi-platform Desktop Apps (using Electron)
Quasar Framework — High Performance Full Frontend Stack, Responsive Single Page Apps, Server-side Render Apps, Progressive Web Apps, Hybrid Mobile Apps (that look native!) & Electron Apps, all using the same codebase.

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

Beginners Guide Quasar Framework and what are the Top features offered out of the box by Quasar Framework are:

1) All platforms in One Go

One authoritative source of code for all platforms, simultaneously: responsive desktop/mobile websites (SPA, SSR + SPA client takeover, SSR + PWA client takeover), PWAs (Progressive Web Apps), mobile apps (that look native) and multi-platform desktop apps (through Electron).

2) Top class, fast web responsive components

There’s a component for almost every web development need out there. Each of these components is carefully crafted to offer the best possible experience to users. Quasar is designed with performance & responsiveness in mind — so the overhead of using Quasar is barely noticeable. This is an area we take special pride in.

3) Best practices integrated by default

Developers using Quasar are encouraged to follow web development best practices, and it comes embedded with many such features out of the box. HTML/CSS/JS minification, cache busting, tree shaking, sourcemapping, code-splitting & lazy loading, ES6 transpiling, linting code, accessibility features. Quasar takes care of all these and more — no configuration needed.

4) Full RTL Support

RTL (right to left) support for both Quasar components & the developer’s own code. Developer-written website/app CSS code gets automatically converted to RTL if an RTL language pack is used.

5) Two Themes

The framework supports two of the most commonly used themes out of the box — Material theme and iOS theme and more to come.

6) Progressively migrate your existing project

Quasar offers a UMD (Unified Module Definition) version, which means developers can add a CSS and JS HTML tag into their existing project and they’re ready to use it. No build step is required.

7) Unparalleled developer experience through Quasar CLI

When using Quasar’s CLI, developers benefit from:

  • State preserving hot-reload 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 and they can 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 only
  • ES6 code transpiling
  • Sourcemaps
  • Changing build options doesn’t require a manual reload of the dev server
  • Many more leading-edge developer tools and techniques

8) Get up to speed fast

The top-class project intitialization feature of the CLI makes getting started very easy for you, as a developer. You can get your idea to reality in record time. In other words, Quasar does the heavy lifting for you, so you are free to focus on your features and not on boilerplate.

9) Awesome ever-growing community

When developers encounter a problem they can’t solve, they can visit the Quasar forum or Discord chat server. The community is there to help you.

10) Wide platform support

Google Chrome, Firefox, IE11/Edge, Safari, Opera, iOS, Android, Windows Phone, Blackberry.

11) Quasar components Internationalization (I18n)

I18n is provided by default for Quasar components. If your language pack is missing it takes just 5 minutes to add it.

12) Great documentation

Finally, it’s worth mentioning the significant amount of time that is spent on writing great, bloat-free, focused, complete documentation pages so that developers can quickly pick up Quasar. There will be no room for confusion.

Important links:

Website, GitHub, Medium, Documentation, Twitter, Installation Guide.

Demo: [ Material theme ] [ iOS theme ]

Release notes (& changelog) for v0.17.19

Please help Quasar by supporting it.

Happy Coding!

Professional Freelancer in Web / Software Development and Technologies Consultant