Community hub
0 subscribers8 pages, 0 posts
Recent from talks
All channels
Be the first to start a discussion here.
Be the first to start a discussion here.
Be the first to start a discussion here.
Be the first to start a discussion here.
Contribute something
Welcome to the community hub built to collect knowledge and have discussions related to Quasar Framework.
Nothing was collected or created yet.
Quasar Framework
View on Wikipediafrom Wikipedia
 |
| Quasar Framework | |
|---|---|
 | |
| Original author | Razvan Stoenescu |
| Initial release | February 2015[1] |
| Stable release | 2.18.6
/ November 13, 2025[2] |
| Written in | JavaScript |
| Size | 14.7 KB min+gzip |
| Type | JavaScript framework |
| License | MIT License[3] |
| Website | quasar |
| Repository | |
The Quasar Framework (commonly referred to as Quasar; pronounced /ˈkweɪ.zɑːr/[4]) is an open-source Vue.js based framework for building apps with a single codebase. It can be deployed on the Web as a SPA, PWA, SSR, to a Mobile App, using Cordova for iOS & Android, and to a Desktop App, using Electron for Mac, Windows, and Linux. [5][4] Quasar was created by Razvan Stoenescu and is maintained by a small team of developers (also known as the "core team") and contributors. Most from the core team currently work at various companies such as Lenovo, IntelliView Technologies Inc. and AG Development Services.[6]
Overview
[edit]Quasar focuses on building VueJS user interfaces quickly. The user only needs to write one authoritative source of code for all platforms: 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) and also browser extensions.[4]
Quasar is designed with performance, responsiveness and inter-operability in mind.[4]
History
[edit]Quasar was created by Razvan Stoenescu after working for IBM and Lenovo using constantly new and different software tools to create all the separate types of iOS apps, Android apps, web applications, Windows Desktop apps, Apple Desktop apps, and PWAs. He later summed up his thought process: "I longed for a single framework that would remove all the complexity and produce all these different flavors of apps … from a SINGLE codebase. Unable to locate such a mythical tool, I decided to build it."[1][4]
The first source code commit to the project was dated 2015, and Quasar stable 1.0 release was released in July 2019. The first Quasar conference took place in July 2020.[7] Quasar v2 (with Vue.js 3) went stable in 2.0.0 release in June 2021.
Features
[edit]Components
[edit]Quasar apps are built using Vue Single File Components and Quasar Components. Vue Single file components contain multiple sections: template (HTML), script (Javascript) and style (CSS/Stylus/SASS/SCSS/Less) - all in the same file.[8] The code snippet below contains an example of the structure of a Vue Single File Component:
<template>
<!-- you define your Vue template here -->
</template>
<script setup>
// This is where your Javascript goes
// to define your Vue component, which
// can be a Layout, a Page or your own
// component used throughout the app.
</script>
<style>
/* This is where your CSS goes */
</style>
Quasar components are HTML tags that begin with q and link to the /quasar.config file.
Ecosystem
[edit]The core library comes with tools and libraries both developed by the core team and contributors.
Official tooling
[edit]Quasar Framework consists of several key components:
- Quasar CLI
- A command-line interface tool that facilitates the creation and development of cross-platform applications. It provides a global environment for app initialization and management.
- Quasar App
- The local development and build environment within the Quasar CLI. It includes:
- A development server for real-time previewing of changes
- Build systems for deploying applications to multiple platforms, including:
- Web
- Progressive Web Applications (PWA)
- Server-Side Rendering (SSR)
- Cordova
- Capacitor
- Electron
- Browser Extensions
- Quasar UI
- A comprehensive library of user interface components designed for use within Quasar applications.
See also
[edit]
Sources
[edit]
This article incorporates text from a free content work. Licensed under MIT License (license statement/permission). Text taken from Quasar Framework Guide, Quasar Framework.
References
[edit]- ^ a b Stoenescu, Razvan (July 3, 2019). "Why every Vue developer should be excited by Quasar 1.0". Quasar Framework.
- ^ "Quasar Framework Quasar Releases". GitHub. October 3, 2022.
- ^ "Quasar/LICENSE". GitHub. Retrieved May 20, 2020.
- ^ a b c d e "Guide: What is Quasar?". Quasar Framework. Retrieved May 20, 2020.
- ^ Connell, Danny (2020). Quasar Framework: Cross-Platform Vue JS Vuex & Firebase Apps. Udemy.
- ^ "Meet the Team — Quasar Framework". quasar-framework.org. Retrieved May 20, 2020.
- ^ "Quasar.conf 2020". July 5, 2020.
- ^ "Vue Single File Components (SFC) — Quasar Framework". Retrieved May 22, 2020.
External links
[edit]Quasar Framework
View on Grokipediafrom Grokipedia
Introduction
Overview
Quasar Framework is an open-source framework built on Vue.js, designed to enable developers to create high-performance, responsive applications across multiple platforms using a single codebase.[4] It is licensed under the MIT License, allowing broad adoption and modification by the community.[2] As a developer-oriented tool, Quasar emphasizes efficiency in building user interfaces, providing over 70 customizable Material Design components out of the box, eliminating the need for additional UI libraries.[4] The framework supports deployment to various platforms, including web applications as single-page apps (SPAs), progressive web apps (PWAs), and server-side rendered (SSR) sites, as well as hybrid mobile apps via Cordova or Capacitor, and desktop applications through Electron.[2] This cross-platform capability ensures that applications maintain a consistent look and feel across devices without requiring separate codebases.[4] Quasar enhances developer productivity through features like rapid prototyping, where a full application can be assembled and tested in minutes, and built-in support for modern web standards such as accessibility (a11y) via component-specific props and right-to-left (RTL) language layouts.[5][6] These elements promote consistent UI design and adherence to inclusive practices, making it suitable for enterprise-level development.[4]Licensing and Development
Quasar Framework is released under the permissive MIT License, which grants users the right to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the software for any purpose, including commercial applications, without restriction, provided that the original copyright notice and license text are included in all copies or substantial portions of the software.[7] This licensing model ensures broad accessibility while requiring attribution through the retention of the notice stating "Copyright (c) 2015-present Razvan Stoenescu."[2] The framework was originally created by Razvan Stoenescu, who serves as the lead maintainer and architect, overseeing its core development alongside a small team of senior contributors.[8] Development is hosted on GitHub under the quasarframework organization, where the open-source project encourages community involvement through pull requests for code contributions and issue tracking for bug reports and feature requests.[9] Releases follow Semantic Versioning 2.0 guidelines, enabling predictable updates with major, minor, and patch versions to indicate compatibility and changes.[2] Detailed changelogs for each release are published on the GitHub Releases page, documenting new features, improvements, and fixes; the current stable series is v2.x, with the latest version at v2.18.6 as of November 2025.[10] Ongoing maintenance and enhancements are sustained by a network of backers and sponsors, including individual donors via GitHub Sponsors and corporate contributions through platforms like Open Collective, which fund exclusive development efforts without relying on paid licensing.[11][12]History
Origins
Quasar Framework was founded by Razvan Stoenescu in 2015 as a personal solo project to simplify the development of Vue.js-based applications.[2] Stoenescu's initial motivations arose from his experiences in corporate environments at companies like IBM and Lenovo, where he encountered frustrations with the inconsistencies, interoperability issues, and complexities of using disparate tools and frameworks to build applications for diverse platforms including iOS, Android, web, and desktop. The core goal was to bridge gaps in existing frameworks by enabling developers to achieve cross-platform deployment and consistent UI experiences from a single codebase, leveraging Vue.js for its simplicity, structured development path, and extensibility. Pre-v1.0 development emphasized building a foundational UI kit and a basic command-line interface (CLI) to streamline app creation. The framework's first public beta release occurred in August 2016, marking its availability to the broader developer community.[13] Among the key early milestones, Quasar integrated with Vue 2.x following its October 2016 launch, adopted Material Design principles to guide its component library for a modern, responsive aesthetic, and refined its v0.x iterations—such as versions 0.13 through 0.17—through extensive community feedback that informed breaking changes and stability enhancements.[14] These efforts culminated in a stable foundation by v0.17, paving the way for a comprehensive refactoring ahead of the first stable v1.0 release in July 2019.Major Releases and Milestones
Quasar Framework reached a significant milestone with the release of its stable version 1.0 on July 3, 2019, which introduced a fully stable command-line interface (CLI), a comprehensive library of UI components, and initial support for cross-platform development including web, mobile (via Cordova), and desktop (via Electron) applications.[15] This version marked the framework's transition to production readiness, enabling developers to build responsive single-page applications (SPAs) with consistent Material Design aesthetics across multiple targets.[15] In June 2021, Quasar v2.0 was released on June 21, representing a major architectural rewrite to ensure full compatibility with Vue 3, alongside substantial performance optimizations such as faster rendering and reduced bundle sizes. The update maintained backward compatibility where possible.[16] To address the challenges of transitioning from Vue 2, the team provided detailed migration guides covering component updates, API changes, and ecosystem adaptations, facilitating smoother upgrades for existing projects. Subsequent updates in the v2.x series focused on refinement and stability. Version 2.9.1, released on October 3, 2022, served as a key stability point with numerous bug fixes and minor enhancements to core components, solidifying the framework's reliability post-Vue 3 migration.[10] By November 13, 2025, Quasar had progressed to v2.18.6. In September 2025, Vite 7 was integrated via @quasar/app-vite v2.4.0 for enhanced build speeds (requiring Node.js 20.19+ or 22.12+), and v2.18.5 added accessibility fixes to components such as QInput, including improved label positioning for better compliance (e.g., ARIA attributes). v2.18.6 included fixes such as resolving issues with the threadsNumber parameter in the runSequentialPromises() utility.[10] Key milestones beyond releases include the inaugural Quasar conference on July 5, 2020, which gathered the community for discussions on framework advancements and best practices, fostering greater adoption.[17] Another pivotal development was the emphasis on App Extensions, introduced to promote modularity by allowing seamless integration of third-party libraries, boot files, and custom logic without disrupting core codebase structure.[18] As of November 2025, no v3.0 release has occurred; instead, the project maintains active v2.x development through bi-weekly updates, prioritizing long-term stability and compatibility with evolving web standards.[10]Core Features
UI Components
Quasar Framework includes an extensive library of over 80 built-in UI components, each implemented as Vue Single File Components (SFCs) and prefixed with "Q-" for easy identification and namespacing, such as QBtn for buttons, QCard for content containers, and QTable for data tables.[19] These components are designed to be reusable and composable within Vue.js applications, leveraging Vue's reactivity and templating system to create modular interfaces without requiring additional setup for basic usage. The design of these components adheres to Material Design guidelines, promoting a cohesive aesthetic with features like elevation, shadows, and motion principles, while allowing developers to customize themes through Sass variables for colors, typography, and spacing. Quasar integrates its own icon set via the QIcon component, supporting thousands of icons from libraries like Material Icons and Font Awesome, and provides layout tools such as QLayout for responsive grid systems, QDrawer for side panels, and QPage for container management to handle complex, adaptive user interfaces across devices. This foundation ensures components render consistently in light and dark modes, with the latter enabled via a built-in plugin that automatically adjusts styles and colors.[20] Components are organized into key categories to cover common UI needs efficiently. Layout components like QPage, QDrawer, and QSplitter enable flexible, responsive structures for organizing content. Forms are handled by elements such as QInput for text fields, QSelect for dropdowns, and QCheckbox for toggles, all supporting built-in validation rules for data integrity. Data display options include QTable for tabular data with sorting and pagination, QCard for modular content blocks, and QTimeline for sequential event visualization. Navigation tools encompass QToolbar for top bars, QTabs for tabbed interfaces, and QMenu for contextual actions, facilitating intuitive user flows.[19] Advanced capabilities enhance interactivity and performance without external dependencies, distinguishing Quasar from frameworks reliant on libraries like Bootstrap. Built-in animations are available through components like QSlideTransition for smooth transitions and directives such as v-ripple, which adds Material Design-inspired ripple effects on touch interactions. Form validation is integrated directly into QForm, allowing declarative rules for client-side checks, while other directives like v-scroll and v-intersection provide hooks for scroll-based behaviors and visibility detection. The entire component set remains lightweight, compiling to minimal CSS and JavaScript tailored to the used elements.[21] Customization extends beyond theming to support global accessibility and localization. Developers can override Sass variables in the quasar.variables.scss file to tailor the visual identity, including breakpoints for responsiveness. Dark mode toggling is seamless, with components automatically adapting via CSS classes. Internationalization (i18n) integration allows translation of component labels and placeholders into over 40 languages through Quasar's language packs, compatible with vue-i18n for full app-wide support.[20][22]Cross-Platform Support
Quasar Framework enables developers to build applications for multiple platforms using a single codebase, leveraging Vue.js as its foundation to ensure consistency across web, mobile, and desktop environments. This approach minimizes development time and maintenance efforts by allowing platform-specific customizations without duplicating core logic. The framework supports various build modes tailored to different deployment targets, including Single Page Applications (SPAs) for standard web browsers, Progressive Web Apps (PWAs) for offline-capable web experiences, and Server-Side Rendered (SSR) applications for improved search engine optimization and initial load performance.[23] For mobile platforms, Quasar integrates with Cordova or Capacitor to produce Android and iOS applications, generating native-like outputs such as APK files for Android and IPA files for iOS. These hybrid apps run within a WebView but gain access to device hardware features—like camera, GPS, and geolocation—through plugins; for instance, the Cordova camera plugin allows image capture vianavigator.camera.getPicture(), while Capacitor equivalents provide similar functionality for modern integrations. Desktop support is handled via Electron, enabling apps for Windows, macOS, and Linux with outputs including EXE installers for Windows and DMG packages for macOS. This unified codebase is maintained through platform-specific adaptations, such as boot files that conditionally execute code based on mode flags (e.g., injecting Electron APIs only in desktop builds or waiting for the Cordova "deviceready" event in mobile apps).[24][25][26]
To optimize performance across platforms, Quasar incorporates techniques like code splitting to load only necessary modules, lazy loading for on-demand component rendering, and tree-shaking to eliminate unused code during builds, all tailored to the target environment for efficient resource use. These features ensure responsive applications despite the shared codebase. However, as hybrid solutions, Quasar apps may not achieve the full performance of purely native applications, particularly in graphics-intensive scenarios, due to reliance on WebView rendering. Building mobile apps also requires platform-specific SDKs, such as Android Studio for APK generation and Xcode for iOS, adding setup complexity.[23][27]
Development Tools
Quasar CLI
The Quasar CLI is the primary command-line interface for initializing, developing, and managing Quasar Framework projects, enabling developers to scaffold applications, run development servers, and produce production builds across supported modes such as Single Page Applications (SPA), Server-Side Rendered (SSR), Progressive Web Apps (PWA), and desktop/mobile targets like Electron and Cordova.[23] It enforces best practices by integrating Quasar's configuration and tooling directly into the project workflow, ensuring consistency in cross-platform development.[23] Installation of the Quasar CLI requires Node.js version 20.19 or higher (or 22.12 or higher) for the Vite-based mode with Vite 7 support, which is the recommended setup in Quasar v2.x, along with npm v6+, Yarn v1, pnpm v8+, or Bun.[28] The global installation can be performed using package managers such asnpm install -g @quasar/cli, yarn global add @quasar/cli, or pnpm add -g @quasar/cli.[23] To create a new project, developers run yarn create quasar (or equivalent with npm/pnpm), which launches an interactive scaffolding wizard prompting for project details, including selection of Quasar v2 with Vite mode for faster development and build processes.[23] This wizard sets up the initial project structure, including the src/ directory for application source code (e.g., components, pages, and assets) and the quasar.config.js file for central configuration.[29]
The quasar.config.js file defines project-specific settings, such as enabling Vue.js integration via framework: { vue: true } or adding Sass support through css: ['sass'], allowing customization of build behaviors, plugins, and framework features without altering core CLI commands.[30] Core CLI commands include quasar dev for launching a hot-reload development server with live updates, supporting mode-specific flags like --mode [electron](/page/Electron) or -m pwa to target platforms such as desktop apps or installable web apps.[31] For production, quasar build generates optimized bundles, minifying code and leveraging browser caching, with options like -m ssr for server-side rendering or -T ios for mobile targets.[31]
In SSR development mode, server-side errors can be debugged by running quasar dev -m ssr and monitoring the terminal for errors such as "Route not found" or Vue SSR stack traces when accessing paths.[32] For clean testing, clear browser storage and unregister Service Workers via the DevTools Application tab.[33] Additional features encompass integrated linting via ESLint and Prettier for code quality enforcement during development, as well as scaffolding extensions for adding directories like src-cordova/ for mobile-specific code.[23] These capabilities in the latest Quasar CLI v2.x streamline workflows while maintaining compatibility with Node 20.19+ environments.[34]
Build Modes and App Extensions
Quasar Framework supports multiple build modes to accommodate different development and production needs, with Vite serving as the default build tool since version 2.0, providing rapid Hot Module Replacement (HMR) for efficient development workflows.[35] Vite's native ES modules and optimized bundling enable faster startup times and incremental compilation compared to traditional bundlers.[36] In contrast, Webpack remains available as a legacy option for projects requiring its specific configuration capabilities, though it is no longer recommended for new applications due to slower performance.[37] Build modes and related plugins, such as Axios for API requests or Pinia for state management, are configured in thequasar.config.js file under sections like framework.plugins, allowing seamless integration without manual boilerplate.[30]
App Extensions provide a modular way to enhance Quasar applications by injecting libraries, boot files, templates, and custom logic, ensuring zero-configuration setup for common functionalities.[18] Official extensions include @quasar/quasar-app-extension-dotenv for managing environment variables across development and production builds, and @quasar/testing for setting up testing with Vitest or Jest. These extensions automatically handle dependencies and configurations, such as adding PWA manifests and service workers for offline capabilities in PWA mode, or integrating third-party services like Firebase for real-time data and authentication.[38] They also auto-configure routing via Vue Router and state management with Pinia or Vuex, streamlining app architecture.[18]
Extensions are managed through the Quasar CLI, with commands like quasar ext add <ext-id> for installation, quasar ext for listing installed ones, quasar ext invoke <ext-id> for reconfiguration, and quasar ext remove <ext-id> for removal, all tracked in quasar.extensions.json.[18] This approach ensures zero-config adoption for features like TypeScript support—enabled by installing TypeScript and running quasar prepare—or testing setups with Vitest or Jest via @quasar/quasar-app-extension-testing.[39][40]
Recent updates in Quasar v2.18.6 (as of November 2025) include support for Vite 7 via @quasar/app-vite v2.4.0.[41]
To implement standard Vue Router in Quasar projects with support for SSR, the router configuration is typically set up in the src/router/index.ts file using Quasar's route wrapper from quasar/wrappers. This wrapper allows conditional history creation based on the environment to handle server-side rendering appropriately. Routes are defined in a separate src/router/routes.ts file and exported as a default array. The following code example illustrates the standard setup:[42][43]
typescript
import { route } from 'quasar/wrappers';
import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router';
import routes from './routes';
export default route(function () {
const createHistory = process.env.SERVER
? createMemoryHistory
: process.env.MODE === 'ssr' && process.env.CLIENT
? createWebHistory
: createWebHashHistory;
return createRouter({
scrollBehavior: () => ({ left: 0, top: 0 }),
routes,
history: createHistory(process.env.VUE_ROUTER_BASE)
});
});
import { route } from 'quasar/wrappers';
import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router';
import routes from './routes';
export default route(function () {
const createHistory = process.env.SERVER
? createMemoryHistory
: process.env.MODE === 'ssr' && process.env.CLIENT
? createWebHistory
: createWebHashHistory;
return createRouter({
scrollBehavior: () => ({ left: 0, top: 0 }),
routes,
history: createHistory(process.env.VUE_ROUTER_BASE)
});
});
Ecosystem
Official Integrations
The Quasar Framework provides a suite of official integrations through its core packages and App Extensions, enabling developers to extend functionality seamlessly while maintaining compatibility with the framework's build system. These integrations are maintained by the Quasar team and are designed to integrate directly via the Quasar CLI, ensuring consistent performance across platforms.[18] Core packages include @quasar/extras, which supplies a collection of icons and fonts such as Material Icons, Material Symbols, Font Awesome, Ionicons, MDI, Eva Icons, and Themify, allowing easy inclusion without manual configuration.[44] Another key package is @quasar/quasar-ui-qcalendar, a specialized UI component for calendar views with features like event rendering and date selection, compatible with Quasar v2.18.6.[45][4] For state management, Quasar offers built-in support for Pinia through CLI commands likequasar new store, which generates boilerplate stores integrated with the framework's boot process for universal code execution in SSR modes.[46]
Testing and linting are handled via the official @quasar/testing App Extension, which provides pre-configured setups for Vitest and Jest (unit testing) as well as Cypress (end-to-end testing), including Quasar-specific utilities for component mocking. This extension also incorporates ESLint with Quasar's custom rules for code quality enforcement during development.[47][48]
Deployment integrations focus on streamlined builds for various environments: Quasar CLI natively supports Electron Builder for desktop applications, generating distributables like installers and auto-updaters. For web deployments, official guides detail configurations for Netlify and Vercel, handling SSR and PWA modes with environment-specific optimizations such as custom serverless functions.[49]
Additional runtime integrations include i18n support via vue-i18n, configurable through boot files and quasar.config.js for multilingual apps, and theming capabilities with Sass or Stylus preprocessors, where styles are version-locked to Quasar v2.18.6 (as of November 2025) for consistent variable scoping and dark mode toggling. All official integrations are pinned to this version to avoid breaking changes.[50][30][4]