quasarframework/quasar
 Watch   
 Star   
 Fork   
5 days ago
quasar

@quasar/app-vite-v3.10.1

Changes

  • fix(app-vite): TypeScript -> $q.bex and $q.cordova carry their BexBridge / Cordova types again in projects using moduleResolution: "bundler". They had silently degraded to any, 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

Donations

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:

5 days ago
quasar

quasar-v2.34.0

New

  • feat(ui): useElementSize() composable -> reactive elementSize ({ width, height }) of an element or component ref, with an onResize hook, a debounce window and a disabled switch; 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), once modifier, a handler returning false stops it
  • feat(ui): useScroll() composable -> reactive scroll position, direction, delta and inflection point of the page or of a scrollable container, with an onScroll hook, axis, debounce and disabled; 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 a q-drop-zone--over class 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 mutationRecords as reactive state
  • feat(ui): useSoftFullscreen() composable -> the in-page fullscreen behind the fullscreen prop 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 -> isIdle flips after timeout ms with no user activity, plus lastActive and resetIdle(); 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 ?worker import): status, last message and error, postWorkerMessage(), a terminateWorker() 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, with timeout, 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.isPending is 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 gains flush() plus an isPending property; throttle() gains cancel(), 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 / isIntervalActive reactive 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() and stopIntersection(), 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.network with the online state and, where the browser has the Network Information API, effectiveType/downlink/rtt/saveData
  • feat(ui): AppWakeLock plugin -> $q.wakeLock wraps 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): vertical prop -> stacks the buttons in a column, with the corners and seams drawn for that direction (#7766)
  • feat(QBtnToggle): align prop -> aligns the content of every option button (overridable per option), so the icons of a vertical toggle line up
  • feat(QInfiniteScroll): horizontal prop -> loads more when the row is scrolled to its inline end (the left one in RTL), reverse included (#6709)
  • feat(QTable): body-expand slot -> an expansion row declared after each body row while QTable keeps rendering the row itself (and its body-cell-[name] slots); no more taking over the whole row through the body slot (#4380)
  • feat(QTr): expandable prop -> an expansion row that can slide open and closed with a QSlideTransition inside its cell (#4380)
  • feat(QTable): a column's field is optional -> a column rendered entirely through its body-cell-[name] slot needs none
  • feat(ui): TypeScript -> Quasar directives are type-checked in templates (value, modifiers and argument) through Vue's GlobalDirectives

Fixes

  • 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 target that resolves after the model turns on (v-model written 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 once observation that fired resumes observing when once goes away
  • fix(ui): v-intersection -> a null value disables it instead of throwing; the v-intersection/v-mutation/v-resize/v-drop-zone disable values are typed as false | null instead of Boolean, which invited true
  • 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 as get() does; on the server, set() replaces the request cookie so getAll() no longer returns the previous value; remove() is typed to accept the same attributes as set() (a __Secure-/__Host- cookie needs secure) and set() 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 -> MetaOptions and noop are importable from "quasar"

Other

  • 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

Donations

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:

11 days ago
quasar

quasar-v2.33.2

Changes

  • fix(QField): custom standout text color -> a text-* class in a string standout (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 broken https://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

Donations

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:

12 days ago
quasar

@quasar/cli-v5.0.9

This is the optional globally-installed part of the Quasar CLI

Changes

  • fix(cli): upgrade -> quasar upgrade no longer treats eslint-plugin-quasar as 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 behind quasar serve) and open ^11.0.4
  • chore(cli): the package now declares its cli folder in its repository field, so the "Repository" and provenance links on npm point at the CLI's source instead of the monorepo root

Donations

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:

12 days ago
quasar

@quasar/app-vite-v3.10.0

New

  • feat(app-vite): Capacitor mode -> defineCapacitorConfig() now defaults the splash screen plugin's androidScaleType to CENTER_CROP. The plugin stretches its drawables (FIT_XY) when the app calls show(), 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/icongenie v7+. This only affects newly generated modes (quasar mode add pwa / bex); in an existing project, run Icon Genie v7 and add the new entries to src-pwa/manifest.json / src-bex/manifest.json by hand. The unreferenced icons/ms-icon-144x144.png is gone from the PWA template

Fixes

  • 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.ico is 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, regenerate src-electron/icons/icon.ico with @quasar/icongenie v7+ (or copy the new template file)

Donations

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:

12 days ago
quasar

@quasar/icongenie-v7.0.0

Breaking changes

  • 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 generate on an upgraded project rewrites the assets and config.xml for the new layout: the twelve Android splash images, the 23-entry iOS icon list and the ~iphone/~ipad launch images are deleted, their config.xml entries are pruned along with the legacy Android <splash> entries and the SplashMaintainAspectRatio preference, and cordova-plugin-splashscreen is 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-capacitor anymore except @capacitor/splash-screen when missing. Existing projects can drop @capacitor/assets from /src-capacitor/package.json and delete the now unused /src-capacitor/assets folder (icon.png + splash.png).
  • Windows ICO files changed layout (icon.ico and favicon.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.

New

  • 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 --background or a flat --png-color fill, legacy and round icons), the splash drawables for every density, the 1024px iOS icon and the three Splash.imageset images; the mipmap-anydpi-v26 adaptive icon XML files and every Contents.json are updated in place (written in Xcode's own serialization, so they no longer churn on each run); verify covers the new files and their mount status; capacitor-android/capacitor-ios assets are skipped with a warning when the platform folder does not exist yet, so a later cap add still works
  • feat(icongenie): new --splashscreen-dark-color param -> generates the dark variants (Android night drawables, iOS dark-appearance images, Cordova ~dark launch images); when it is not set, previously generated dark variants are removed so the project always reflects the current params
  • feat(icongenie): new --background-dark param -> the image for the dark splashscreen variants (falls back to --background, so existing usage is unchanged); before, an opaque --background made the dark color invisible
  • feat(icongenie): new --icon-monochrome param -> 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; verify checks 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 its AndroidWindowSplashScreenAnimatedIcon/AndroidWindowSplashScreenBackground preferences; iOS icon.png, icon-dark.png and icon-tinted.png plus the six ~universal launch storyboard images (and their ~dark variants under --splashscreen-dark-color)
  • feat(icongenie): pwa mode -> icon-maskable-512x512.png and icon-monochrome-512x512.png for the manifest's purpose entries; 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.png with its apple-touch-icon tag, 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): --padding accepts 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 launcher generator, the maskable variant, the variant, scale, dark and appearance asset props and the cordova-android/cordova-ios/capacitor-android/capacitor-ios platforms; verify -p normalizes 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.

Fixes

  • 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

Donations

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:

12 days ago
quasar

quasar-v2.33.1

Changes

  • fix(QPagination): the page input clears once the page is submitted -> in input mode 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 the rgb(R, G, B, A) form; only rgba() preserved it, rgb(255, 0, 0, 0.5) lost its fourth argument. rgba() written without an alpha still yields a: 100 (#18555)

Donations

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:

12 days ago
quasar

@quasar/mcp-v1.1.0

Changes

  • 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 optional app argument 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, and check_updates covers every distinct version installed across the apps (#18554)
  • feat(mcp): --project on 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)

Donations

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:

17 days ago
quasar

@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.

New

  • feat(mcp): docs that match your project -> the agent reads the Quasar documentation and the component API of the exact quasar and @quasar/app-vite versions 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 your package.json. One entry in your MCP client and you are done:
    {
      "mcpServers": {
        "quasar": {
          "command": "npx",
          "args": ["-y", "--fetch-retries=0", "@quasar/mcp@latest"]
        }
      }
    }
    Works with Claude Code, Codex, Cursor, VS Code and any other MCP client; use --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-vite or the server itself exist (check_updates; checked in the background, cached for a day, never while offline, NO_UPDATE_NOTIFIER disables 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.

Donations

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:

17 days ago
quasar

@quasar/app-vite-v3.9.0

Changes

  • 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/mcp server and your agent looks things up instead of guessing
  • chore(deps): dependencies refreshed (@vitejs/plugin-vue 6.0.9, @clack/prompts 1.8.1, open 11.0.4, @types/chrome 0.3)

Donations

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: