@quasar/app-vite-v3.10.1
- fix(app-vite): TypeScript ->
$q.bexand$q.cordovacarry theirBexBridge/Cordovatypes again in projects usingmoduleResolution: "bundler". They had silently degraded toany, since the augmentation no longer reached the Quasar globals declaration - docs(app-vite):
ssr.noPreloadTagRoutes/ssg.noPreloadTagRoutes-> the typings now state that only the route-level preload tags are left out; the modulepreload tags Vite writes into the HTML template for the app entry's own static imports stay on every route
Quasar Framework is an open-source MIT-licensed project made possible due to the generous contributions by sponsors and backers. If Quasar is useful in your workflow and you want to support ongoing maintenance, please consider the following:
quasar-v2.34.0
- feat(ui): useElementSize() composable -> reactive
elementSize({ width, height }) of an element or component ref, with anonResizehook, a debounce window and adisabledswitch; QResizeObserver is now built on it - feat(ui): v-resize directive -> the template-side form of useElementSize(): reports an element's size without adding a node (the initial size, then only on change), debounce as the argument (
v-resize:100),oncemodifier, a handler returningfalsestops it - feat(ui): useScroll() composable -> reactive scroll position, direction, delta and inflection point of the page or of a scrollable container, with an
onScrollhook,axis, debounce anddisabled; QScrollObserver is now built on it - feat(ui): useFilePicker() composable -> opens the native file dialog from setup code without rendering a file input;
openFilePicker()resolves with the accepted files (null when dismissed) and the files get validated by the same rules as QFile (accept,maxFileSize,maxTotalSize,maxFiles,filter...) - feat(ui): useDropZone() composable and v-drop-zone directive -> turn any element or component into a drop target for files, with the QFile validation rules, a reactive
isOverDropZone(the directive sets aq-drop-zone--overclass instead) and rejected-file reporting. QFile and QUploader now handle drops through it - feat(ui): useObjectUrl() composable -> a reactive object URL for a Blob, File or MediaSource, revoked for you when the source changes and when the component is destroyed
- feat(ui): useEventListener() composable -> attaches a listener to an element, window, document or component, following reactive targets, event names and options; removed on unmount
- feat(ui): useMutation() composable -> the setup-code counterpart of v-mutation, with the latest
mutationRecordsas reactive state - feat(ui): useSoftFullscreen() composable -> the in-page fullscreen behind the
fullscreenprop of QTable, QCarousel and QEditor (back button, route-change exit, scroll restore, popups kept on top), now usable on any element or component - feat(ui): useIdle() composable ->
isIdleflips aftertimeoutms with no user activity, pluslastActiveandresetIdle(); hidden-page time counts as inactivity - feat(ui): useKeyboardShortcut() composable -> runs a handler for a "Mod+K" style shortcut (Mod is Meta on macOS, Ctrl elsewhere), matching either the layout-aware key or the physical key code; unmodified printable shortcuts stay quiet while typing in a field
- feat(ui): useWebSocket() composable -> a WebSocket connection kept alive from a component: status, last message, send queue flushed on open, auto reconnect with backoff (paused while offline), optional heartbeat, closed on unmount
- feat(ui): useEventSource() composable -> Server-Sent Events from a component: named events, last event id, and a reconnect where the browser gives up; closed on unmount
- feat(ui): useBroadcastChannel() composable -> message the other tabs, windows, iframes and workers of the same origin; closed on unmount
- feat(ui): useWebWorker() composable -> connects a component to a Web Worker script of your own (a URL, a Worker or a factory such as a Vite
?workerimport): status, last message and error,postWorkerMessage(), aterminateWorker()that frees the thread until the next message, and onCreate/onMessage/onError/onTerminate(reason) hooks - feat(ui): useWebWorkerFn() composable -> runs a function off the main thread:
runWorkerFn(...args)resolves with its result, withtimeout, Transferables, script dependencies, one hook per outcome (onSuccess/onError/onTimeout/onTerminate) and an inline run on the SSR server - feat(ui): useDebounce() and useThrottle() composables -> the debounce()/throttle() utils applied to a function, with the waiting call cancelled on deactivation and unmount;
fn.isPendingis reactive on the useDebounce() one - feat(ui): debounce() and throttle() utils -> debounce() takes
{ leading, trailing, maxWait }as its third param (a boolean still means "immediate") and gainsflush()plus anisPendingproperty; throttle() gainscancel(),flush()and an opt-in trailing call (throttle(fn, limit, true)) so a burst no longer ends on a stale state - feat(ui): useTimeout() and useInterval() -> also return
isTimeoutPending/isIntervalActivereactive flags - feat(ui): useTimeout(), useInterval(), useAnimationFrame() and useTick() -> work outside of a component (they used to warn and then throw when the timer fired); call the remove method when done
- feat(ui): useIntersection() -> returns
refreshIntersection()andstopIntersection(), named after the composable like the new ones;refresh()/stop()keep working - feat(ui): LocalStorage/SessionStorage useStorage() -> binds a stored item to a Vue ref: an assignment persists right away, nested changes of an Object or Array persist too, and the ref follows setItem()/removeItem()/clear(), its other refs and other tabs. Default from a function,
disabled,onError, typed keys through the augmentable LocalStorageItems/SessionStorageItems interfaces, SSR-safe - feat(ui): Cookies useCookie() -> binds a cookie to a Vue ref with the cookie options of set(); follows set()/remove(), its other refs and (where the browser has the Cookie Store API) cookies set by the server, another tab or natively. Default from a function, typed names through the augmentable CookieValues interface; on the server it reads the request cookie and writes a Set-Cookie header
- feat(ui): AppNetwork plugin -> reactive
$q.networkwith the online state and, where the browser has the Network Information API, effectiveType/downlink/rtt/saveData - feat(ui): AppWakeLock plugin ->
$q.wakeLockwraps the Screen Wake Lock API (isCapable, isActive, request/release/toggle) and re-acquires the lock when the page becomes visible again - feat(Screen):
$q.screen.orientation-> reactive{ type, angle, portrait, landscape }of the device screen - feat(QBtnGroup/QBtnToggle):
verticalprop -> stacks the buttons in a column, with the corners and seams drawn for that direction (#7766) - feat(QBtnToggle):
alignprop -> aligns the content of every option button (overridable per option), so the icons of a vertical toggle line up - feat(QInfiniteScroll):
horizontalprop -> loads more when the row is scrolled to its inline end (the left one in RTL),reverseincluded (#6709) - feat(QTable):
body-expandslot -> an expansion row declared after each body row while QTable keeps rendering the row itself (and itsbody-cell-[name]slots); no more taking over the whole row through thebodyslot (#4380) - feat(QTr):
expandableprop -> an expansion row that can slide open and closed with a QSlideTransition inside its cell (#4380) - feat(QTable): a column's
fieldis optional -> a column rendered entirely through itsbody-cell-[name]slot needs none - feat(ui): TypeScript -> Quasar directives are type-checked in templates (value, modifiers and argument) through Vue's GlobalDirectives
- fix(QTooltip): a closing QDialog or QMenu returns focus to its opener -> the opener's tooltip no longer shows as if it had been tabbed onto (#18556)
- fix(QMenu/QTooltip): a
targetthat resolves after the model turns on (v-modelwritten before:target) -> the popup is anchored to it instead of rendering at its static position in Chromium (#18559) - fix(QItem): side, overline, caption and header labels -> they follow a dark mode switch and an active item's color in Chrome instead of keeping the previous color
- fix(ui): useIntersection(), QIntersection and v-intersection -> a
onceobservation that fired resumes observing whenoncegoes away - fix(ui): v-intersection -> a
nullvalue disables it instead of throwing; the v-intersection/v-mutation/v-resize/v-drop-zone disable values are typed asfalse | nullinstead of Boolean, which invitedtrue - fix(QScrollObserver): with
axis="both"-> no longer emits an unchanged position (on mount, on an RTL flip);getPosition()returns a snapshot instead of the live internal object - fix(Screen):
setDebounce()-> the pending update of the previous listener is applied right away instead of running late on a target it was removed from - fix(LocalStorage/SessionStorage):
setItem(key, null | undefined)removes the item, so a null read always means a missing item (older versions stored the strings the browser made of them); a stored RegExp keeps its flags (what older versions stored still decodes); an item stored natively as an empty String reads as''instead of null - fix(Cookies):
getAll()decodes and parses the values asget()does; on the server,set()replaces the request cookie sogetAll()no longer returns the previous value;remove()is typed to accept the same attributes asset()(a__Secure-/__Host-cookie needssecure) andset()the Object/Array/Number values it always stored - fix(ui): TypeScript -> template refs to Quasar components carry their instance methods (
useTemplateRef('btn').value.click(),.validate()...) - fix(ui): TypeScript ->
MetaOptionsandnoopare importable from "quasar"
- refactor(ui): QLayout, QHeader, QFooter, QTabs and QScrollArea observe through useElementSize()/useScroll() instead of mounting hidden QResizeObserver/QScrollObserver children, so layout pages carry fewer component instances and re-render less on scroll
Quasar Framework is an open-source MIT-licensed project made possible due to the generous contributions by sponsors and backers. If Quasar is useful in your workflow and you want to support ongoing maintenance, please consider the following:
quasar-v2.33.2
- fix(QField): custom standout text color -> a
text-*class in a stringstandout(e.g.standout="bg-teal text-yellow") now colors the input, prefix, suffix, prepend and append too, not just the label. Before, the focused standout painted those in hard white (black in dark mode). A string without a text color keeps the theme default for the content, and its label now uses that default too instead of the primary color (#16019) - fix(QEditor): link URL field -> it opens empty, with
https://shown as a placeholder instead of pre-filled as a value. Pasting a copied URL no longer produces a brokenhttps://https://...link (#11450) - fix(QEditor): editing a link a second time -> confirming the URL no longer nests a new anchor (with the URL as its text) inside the existing link in Chromium. Escape no longer commits what was typed, and Remove strips the right link
- perf(ui): QTabPanels, QCarousel, QStepper -> each render now collects the panels in one pass over the slot content instead of three
Quasar Framework is an open-source MIT-licensed project made possible due to the generous contributions by sponsors and backers. If Quasar is useful in your workflow and you want to support ongoing maintenance, please consider the following:
@quasar/cli-v5.0.9
This is the optional globally-installed part of the Quasar CLI
- fix(cli): upgrade ->
quasar upgradeno longer treatseslint-plugin-quasaras a Quasar package. That package has been archived and is not part of the framework anymore, so the upgrade command stopped looking it up on npm, listing it as outdated and (with--install) trying to upgrade it. Projects still depending on it keep it exactly as pinned, like any other third-party dependency - chore(cli): upgraded deps ->
@clack/prompts^1.8.1,hono^4.13.8 (the web server behindquasar serve) andopen^11.0.4 - chore(cli): the package now declares its
clifolder in itsrepositoryfield, so the "Repository" and provenance links on npm point at the CLI's source instead of the monorepo root
Quasar Framework is an open-source MIT-licensed project made possible due to the generous contributions by sponsors and backers. If Quasar is useful in your workflow and you want to support ongoing maintenance, please consider the following:
@quasar/app-vite-v3.10.0
- feat(app-vite): Capacitor mode ->
defineCapacitorConfig()now defaults the splash screen plugin'sandroidScaleTypetoCENTER_CROP. The plugin stretches its drawables (FIT_XY) when the app callsshow(), which distorted the icon on any screen whose aspect ratio differs from the resource's; Icon Genie composes the splash screens icon-centered on a covering background, so cropping the edges loses nothing. A value you set yourself always wins and your other plugin settings are kept (#7751) - feat(app-vite): templates -> the PWA manifest now lists the maskable and monochrome 512px icons with their
purpose, and the BEX manifests list the 32px and 96px icons, matching the asset set generated by@quasar/icongeniev7+. This only affects newly generated modes (quasar mode add pwa/bex); in an existing project, run Icon Genie v7 and add the new entries tosrc-pwa/manifest.json/src-bex/manifest.jsonby hand. The unreferencedicons/ms-icon-144x144.pngis gone from the PWA template
- fix(app-vite): PWA + SSG mode -> with
workboxMode: 'InjectManifest'the generated service worker precached the SSG renderer's own__ssg__files (hundreds of useless entries, a noticeably larger precache); the ignore rule now applies to both workbox modes - fix(app-vite): Electron mode -> the template
icon.icois regenerated with bitmap small entries, so Windows renders the small sizes (taskbar, title bar) instead of showing a broken icon. This only affects newly generated projects; in an existing one, regeneratesrc-electron/icons/icon.icowith@quasar/icongeniev7+ (or copy the new template file)
Quasar Framework is an open-source MIT-licensed project made possible due to the generous contributions by sponsors and backers. If Quasar is useful in your workflow and you want to support ongoing maintenance, please consider the following:
@quasar/icongenie-v7.0.0
- Cordova mode targets cordova-android 11+ and cordova-ios 8+ only. Those platform generations replaced the old splash images with a single splash icon (Android) and the long icon list with one 1024px icon plus appearance variants (iOS). Projects on older cordova-android / cordova-ios releases should stay on Icon Genie v6. Running
generateon an upgraded project rewrites the assets andconfig.xmlfor the new layout: the twelve Android splash images, the 23-entry iOS icon list and the~iphone/~ipadlaunch images are deleted, theirconfig.xmlentries are pruned along with the legacy Android<splash>entries and theSplashMaintainAspectRatiopreference, andcordova-plugin-splashscreenis no longer installed (cordova-android 11+ ships the splash screen API itself; existing projects can remove the plugin). - Capacitor mode no longer depends on
@capacitor/assets. Icon Genie now generates the native Android and iOS assets itself (see below), so nothing is installed into or spawned from/src-capacitoranymore except@capacitor/splash-screenwhen missing. Existing projects can drop@capacitor/assetsfrom/src-capacitor/package.jsonand delete the now unused/src-capacitor/assetsfolder (icon.png+splash.png). - Windows ICO files changed layout (
icon.icoandfavicon.ico): the 16/24/32/48px entries are stored as plain bitmaps, the larger sizes stay PNG-compressed. Regenerate to pick it up; nothing else to do.
- feat(icongenie): capacitor mode -> own implementation of the native assets, matching the Capacitor 8 project templates file for file: the adaptive icon layers (foreground fitted to the safe zone, background from
--backgroundor a flat--png-colorfill, legacy and round icons), the splash drawables for every density, the 1024px iOS icon and the threeSplash.imagesetimages; themipmap-anydpi-v26adaptive icon XML files and everyContents.jsonare updated in place (written in Xcode's own serialization, so they no longer churn on each run);verifycovers the new files and their mount status;capacitor-android/capacitor-iosassets are skipped with a warning when the platform folder does not exist yet, so a latercap addstill works - feat(icongenie): new
--splashscreen-dark-colorparam -> generates the dark variants (Androidnightdrawables, iOS dark-appearance images, Cordova~darklaunch images); when it is not set, previously generated dark variants are removed so the project always reflects the current params - feat(icongenie): new
--background-darkparam -> the image for the dark splashscreen variants (falls back to--background, so existing usage is unchanged); before, an opaque--backgroundmade the dark color invisible - feat(icongenie): new
--icon-monochromeparam -> the Android adaptive icon now gets its monochrome layer (Android 13+ themed icons), by default the silhouette of the icon source fitted to the safe zone, or this file when the silhouette is not the right shape;verifychecks the layer reference like the other ones - feat(icongenie): cordova mode -> current-platform asset set: Android adaptive icon layers (foreground, background, monochrome) plus the legacy icon per density on one
<icon>entry, the 960px splash icon with itsAndroidWindowSplashScreenAnimatedIcon/AndroidWindowSplashScreenBackgroundpreferences; iOSicon.png,icon-dark.pngandicon-tinted.pngplus the six~universallaunch storyboard images (and their~darkvariants under--splashscreen-dark-color) - feat(icongenie): pwa mode ->
icon-maskable-512x512.pngandicon-monochrome-512x512.pngfor the manifest'spurposeentries; launch images for the iPhone 18 Pro / Pro Max and the iPhone Duo (one image per display), while the 1242x2208 image (iPhone 6 Plus to 8 Plus, all below the iOS 17 floor) is no longer generated - feat(icongenie): bex mode -> the 32px toolbar icon and the 96px Firefox add-ons manager icon
- feat(icongenie): spa/ssr/ssg modes ->
apple-icon-180x180.pngwith itsapple-touch-icontag, for Safari's Add to Home Screen and macOS Add to Dock of a plain website - feat(icongenie): capacitor mode -> the dark and tinted iOS app icon appearances in the asset catalog
- feat(icongenie):
--paddingaccepts percentages ("8%", 0 to 50) next to pixel values, resolved per file against the box being filled, so one value suits a 16px favicon and a 1024px icon at once (#8921); profile files store whatever form was given; the help text no longer has the two values swapped (the first one is horizontal) - feat(icongenie): profile files -> the
launchergenerator, themaskablevariant, thevariant,scale,darkandappearanceasset props and thecordova-android/cordova-ios/capacitor-android/capacitor-iosplatforms;verify -pnormalizes the color params before validating, so a profile with any color no longer fails the#pattern
The @quasar/app-vite v3.10.0+ and create-quasar templates list the new PWA, BEX and SPA icons; existing projects add the purpose entries, the BEX manifest sizes and the apple-touch-icon tag by hand after regenerating.
- fix(icongenie): ICO files -> the desktop and shortcut icons of a packaged Electron app no longer show up pixelated with wrong colors on Windows (#16552)
- fix(icongenie): profile -> the command crashed when the output path pointed to a folder that does not exist yet
Quasar Framework is an open-source MIT-licensed project made possible due to the generous contributions by sponsors and backers. If Quasar is useful in your workflow and you want to support ongoing maintenance, please consider the following:
quasar-v2.33.1
- fix(QPagination): the page input clears once the page is submitted -> in
inputmode the typed text stayed in the field after pressing Enter, so on a 10-page pagination the field read "99" next to a placeholder reading "10 / 10". The field now empties and shows the current page again (#18552) - fix(ui): color utils ->
textToRgb()keeps the alpha of thergb(R, G, B, A)form; onlyrgba()preserved it,rgb(255, 0, 0, 0.5)lost its fourth argument.rgba()written without an alpha still yieldsa: 100(#18555)
Quasar Framework is an open-source MIT-licensed project made possible due to the generous contributions by sponsors and backers. If Quasar is useful in your workflow and you want to support ongoing maintenance, please consider the following:
@quasar/mcp-v1.1.0
- feat(mcp): workspaces -> started at the root of a workspace holding several Quasar apps, the server now serves all of them instead of only the first one found. The five local tools (
list_pages,search_docs,get_page,list_api,get_api) take an optionalappargument naming an app by its directory relative to the start directory; the client validates the name from the tool schema, so no listing tool is needed. Without it, the first app found is served (a full app before a library, path order otherwise). In a workspace, every answer opens with the app and versions it describes, the session-start instructions list the other apps with their versions, andcheck_updatescovers every distinct version installed across the apps (#18554) - feat(mcp):
--projecton a workspace root -> a directory that holds no Quasar packages itself but is the root of a workspace is scanned for its apps, the same way the working directory is (#18554)
Quasar Framework is an open-source MIT-licensed project made possible due to the generous contributions by sponsors and backers. If Quasar is useful in your workflow and you want to support ongoing maintenance, please consider the following:
@quasar/mcp-v1.0.0
The first release of the Quasar MCP server: your AI coding agent stops guessing at Quasar and starts looking things up.
- feat(mcp): docs that match your project -> the agent reads the Quasar documentation and the component API of the exact
quasarand@quasar/app-viteversions installed in your project, not whatever it remembers from training and not a newer release than the one you run. No more props that do not exist, renamed options or setup steps from another major - feat(mcp): works offline, nothing to install -> everything is served from your own
node_modules, so there are no network calls, no API keys, no rate limits and nothing added to yourpackage.json. One entry in your MCP client and you are done:Works with Claude Code, Codex, Cursor, VS Code and any other MCP client; use{ "mcpServers": { "quasar": { "command": "npx", "args": ["-y", "--fetch-retries=0", "@quasar/mcp@latest"] } } }--project <dir>when the client starts servers outside the project folder - feat(mcp): built for small context windows -> the agent searches by keyword, reads a single section or just the outline of a page, and asks for one prop, slot, event or method of a component instead of pulling whole pages into the conversation (
search_docs,list_pages,get_page,list_api,get_api) - feat(mcp): knows what is outdated -> at session start the agent is told which Quasar versions it is working with and whether newer releases of
quasar,@quasar/app-viteor the server itself exist (check_updates; checked in the background, cached for a day, never while offline,NO_UPDATE_NOTIFIERdisables it)
Requires Node.js 22+. The documentation ships with quasar v2.33.0+ and @quasar/app-vite v3.9.0+; on older releases the server still serves the component API and says what is missing.
Quasar Framework is an open-source MIT-licensed project made possible due to the generous contributions by sponsors and backers. If Quasar is useful in your workflow and you want to support ongoing maintenance, please consider the following:
@quasar/app-vite-v3.9.0
- feat(app-vite): AI-ready out of the box -> your AI coding agent now works from the Quasar CLI documentation of the exact version installed in your project:
quasar.config, every build mode (SPA, SSR, SSG, PWA, BEX, Capacitor, Cordova, Electron), boot files, App Extensions and Icon Genie, available offline. No more config options that do not exist in your version, or setup steps from a CLI you are not running. Pair it with the new@quasar/mcpserver and your agent looks things up instead of guessing - chore(deps): dependencies refreshed (
@vitejs/plugin-vue6.0.9,@clack/prompts1.8.1,open11.0.4,@types/chrome0.3)
Quasar Framework is an open-source MIT-licensed project made possible due to the generous contributions by sponsors and backers. If Quasar is useful in your workflow and you want to support ongoing maintenance, please consider the following: