Quasar Framework — Vue.js Components for Web, Mobile, Desktop, and Electron

Introduction

Quasar is a Vue.js-based framework that provides a comprehensive component library and build tooling for shipping applications across multiple platforms. From a single codebase, you can target single-page apps, server-rendered sites, progressive web apps, mobile apps, Electron desktop apps, and browser extensions.

What Quasar Does

• Provides 70+ Vue.js components including data tables, date pickers, editors, trees, and infinite scroll
• Builds for SPA, SSR, PWA, Capacitor (mobile), Cordova (mobile), Electron (desktop), and browser extensions
• Includes a CLI with scaffolding, hot-reload development, and production build pipelines for each target
• Offers a responsive grid system, layout components, and platform-adaptive styling
• Ships built-in directives for touch gestures, intersection observers, and scroll behavior

Architecture Overview

Quasar is built on Vue 3 and uses Vite as its development and build engine. The framework is organized as a monorepo with the core UI library, the CLI, and platform-specific adapters. Components use the Vue Composition API internally and support both Options and Composition API usage. The build system detects the target platform and injects the appropriate runtime: Capacitor bridge for mobile, Electron main process for desktop, or service worker for PWA.

Self-Hosting & Configuration

• Scaffold a new project with npm init quasar and choose your preferred build targets
• Configure target platforms in quasar.config.js under the build and capacitor/electron sections
• Add or remove Quasar plugins (Notify, Dialog, Loading) in the framework configuration
• Customize the Material Design theme by overriding Sass variables in src/css/quasar.variables.sass
• Use tree-shaking to include only the components you import in production builds

Key Features

• True multi-platform output from one Vue.js codebase without separate projects
• Extensive component library with Material Design styling and built-in accessibility
• Quasar CLI handles all build tooling, eliminating manual Webpack or Vite configuration
• Internationalization support with 40+ language packs and RTL layout mode
• Active community with an official Discord, forum, and regular maintenance releases

Comparison with Similar Tools

• Vuetify — Vue component library focused on Material Design; does not build mobile or desktop apps
• Ionic Vue — cross-platform via Capacitor; fewer Vue-specific components than Quasar
• NuxtJS — Vue meta-framework for SSR/SSG; no built-in UI components or mobile/desktop targets
• PrimeVue — large component set for Vue; no CLI or multi-platform build pipeline
• Element Plus — enterprise Vue 3 components; web-only with no mobile or desktop output

FAQ

Q: Can Quasar build both iOS and Android apps? A: Yes. Quasar uses Capacitor or Cordova to package your Vue app as a native mobile application for both platforms.

Q: Does Quasar support Vue 3? A: Yes. Quasar v2 is built on Vue 3 and uses the Composition API. Quasar v1 targeted Vue 2 and is no longer actively maintained.

Q: How does the desktop build work? A: Quasar wraps your app in an Electron shell. The CLI manages the main process, preload scripts, and packaging for Windows, macOS, and Linux.

Q: Is Quasar free for commercial projects? A: Yes. Quasar Framework is MIT-licensed with no paid tiers for the core framework.

Sources

• https://github.com/quasarframework/quasar
• https://quasar.dev/