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

> A high-performance Vue.js framework with 70+ components that can target SPAs, SSR, PWAs, mobile apps via Capacitor/Cordova, desktop via Electron, and browser extensions from one codebase.

## Install

Save in your project root:

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

## Quick Use
```bash
npm init quasar
# Follow prompts to scaffold a project
cd my-quasar-app
quasar dev
```

## 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/

---
Source: https://tokrepo.com/en/workflows/270237e4-3eae-11f1-9bc6-00163e2b0d79
Author: AI Open Source