quasar-skilld
Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time. ALWAYS use when writing code importing "quasar". Consult for debugging, best practices, or modifying quasar.
By skilld-dev · 486 installs
npx skills add skilld-dev/vue-ecosystem-skills --skill quasar-skilld
Source repository · Upstream listing
Quasar quasar@2.33.1
Vue 3 UI framework for SPA, PWA, SSR, SSG, mobile (Cordova/Capacitor) and desktop
(Electron) apps from one codebase. Vue 3 only. ESM package, Node = 22
( package.json:102 104 ). Baseline for this Skill: quasar 2.33.1 (2026 09 22).
First: read the docs shipped in the installed package
Quasar 2.33+ bundles its documentation offline. Before guessing an API, look inside
the project's node modules/quasar :
dist/api/<Name .json — props, slots, events, methods of every component,
plugin and directive, with addedIn version markers. This is the ground truth.
dist/mcp/ / .md — the quasar.dev pages (components, plugins, directives,
composables, utils, styling, layout) as Markdown; dist/mcp/api/<Name .md
holds the same API in compact readable form. dist/mcp/meta.json (160 pages,
version: 2.33.1 ) indexes them all.
@quasar/mcp MCP server serves the same docs to MCP capable agents.
Details and search commands: [references/offline docs.md](./references/offline docs.md)
Package map
Entry Path Notes
browser ESM dist/quasar.client.js default import target
node/server dist/quasar.server.prod.js what Node/Vitest resolve without the Vite plugin
UMD dist/quasar.umd.prod.js CDN usage with Vue 3 global build
types dist/types/index.d.ts
wrappers wrappers/index.js no op typings, deprecated; use q app/wrappers ( wrappers/index.js:9 16 )
lang packs lang/ .js (75) import langDe from 'quasar/lang/de'
icon sets icon set/ .js (44) import iconSet from 'quasar/icon set/material icons'
Full export surface (components, plugins, directives, composables, utils):
[references/api surface.md](./references/api surface.md)
Common tasks
Install with the Vite plugin ( @quasar/vite plugin v2 needs Vite 8+,
@vitejs/plugin vue 6+, quasar v2.24+, Node 20.19+; ESM only;
dist/mcp/start/vite plugin.md:10 ):
Access $q in Composition API:
Templates use kebab case props exactly as the API JSON lists them
( hide dropdown icon , no error icon ); two way props bind as
v model:propName (the v1 .sync modifier is gone).
Sass variables: quasar = 2.14 pairs with sass embedded@^1.93.2 ; quasar <= 2.13
needs sass@1.32.12 pinned ( dist/mcp/start/vite plugin.md:38 39 ).
More on Vite, Vitest, Storybook, UMD and Quasar CLI:
[references/installation.md](./references/installation.md)
Best practices (verified against the 2.33.1 shipped docs)
Prefer responsive CSS classes ( gt sm , lt md , window width visibility
classes) over the Screen plugin in JS, for performance.
Large QTree : no transition for big datasets; virtual scroll (v2.25+) for
huge ones.
Custom Dialog plugin components: bootstrap with useDialogPluginComponent ;
bind @hide="onDialogHide" directly (v2.28+ forwards the dismissal reason).
Prefer useInterval / useTimeout / useAnimationFrame over native timers;
they auto cancel on unmount and are SSR safe no ops.
SSR/SSG: avoid Dark mode 'auto' unless the server knows the preference
(cookie), else users see a light flash.
Use the LoadingBar plugin instead of a manual QAjaxBar .
Validation for QInput : Quasar recommends Regle ( dist/mcp/vue components/input.md:2397 ).
Quasar CLI projects: import wrappers from q app/wrappers , never
quasar/wrappers .
Full list with citations: [references/best practices.md](./references/best practices.md)
Upgrading (2.20 2.33.1 highlights)
v2.33.0: docs + compact API now ship inside the package (offline, exact
version); pair with the @quasar/mcp server. Fixes: extractDate() matches
the longest locale name; QTable rows per page selector follows a controlled
v model:pagination ; virtual scroll scrollTo() no longer dropped right
after a scroll event.
v2.33.1: QPagination input mode clears the typed page on submit
( src/components/pagination/QPagination.js:290 292 ); textToRgb() keeps the
alpha of rgb(R, G, B, A) ( src/utils/colors/colors.js:149 174 ).
v2.28: QMenu / QTooltip lost the scroll target prop; popups track every
scrolling container automatically. Platform.is dropped ie , edgeChromium ,
winphone , kindle , silk .
v2.29: a @click listener on QItem / QChip now implies clickable .
v2.31: readonly fields ( QInput / QSelect / QFile / QField ) now reflect focus
and validate on blur.
v2.32: QImg renders its <img into SSR HTML when the box shape is known
( ratio / initial ratio / height ); ssr prerender opts in otherwise.
QExpansionItem / QTree no longer wrap content in QSlideTransition .
Deprecated: QInput / QFile getNativeElement() use the nativeEl property
( dist/api/QInput.json ).
No API was added in 2.33.x itself: no addedIn: v2.33 marker exists in
dist/api/ .json . All behavior changes and new APIs, with release URLs:
[references/whats new.md](./references/whats new.md)
Security
The html boolean props ( options html , display value html , html on
Notify/Dialog/Loading) opt into rendering HTML and are an XSS surface: sanitize
before enabling. QEditor has no sanitize option; strip <script / <iframe
server side. Quasar CLI only exposes env variables with the QCLI prefix to
client code.
Checklist: [references/security.md](./references/security.md)