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
quasarframework/quasar quasar@2.19.3
Tags: legacy: 1.22.10, latest: 2.19.3
References: [Docs](./references/docs/ INDEX.md)
API Changes
This section documents version specific API changes — prioritize recent major/minor releases.
BREAKING: v model uses model value + @update:model value instead of value + @input in Vue 3 [source](./references/docs/start/upgrade guide/upgrade guide.md vue 3 and v model)
BREAKING: QDrawer / QDialog / QMenu / QTooltip use class and style attributes instead of content class / content style props [source](./references/docs/start/upgrade guide/upgrade guide.md qdrawerqdialogqmenuqtooltip)
BREAKING: QImg completely redesigned, removed transition and basic props; renamed no default spinner to no spinner [source](./references/docs/start/upgrade guide/upgrade guide.md qimg)
BREAKING: QScrollArea methods getScrollPosition returns { top, left } ; setScrollPosition and setScrollPercentage require axis parameter [source](./references/docs/start/upgrade guide/upgrade guide.md qscrollarea)
BREAKING: QTable renamed data prop to rows to avoid TS naming conflicts [source](./references/docs/start/upgrade guide/upgrade guide.md qtable)
BREAKING: Platform.is all boolean properties now explicitly false instead of undefined since v2.17.0 [source](./references/repos/quasarframework/quasar/releases/vquasar v2.17.0.md potential upgrade issue)
BREAKING: colors utils getBrand and setBrand replaced by getCssVar and setCssVar respectively [source](./references/docs/start/upgrade guide/upgrade guide.md color utils)
BREAKING: Scroll utils renamed getScrollPosition to getVerticalScrollPosition , animScrollTo to animVerticalScrollTo , and setScrollPosition to setVerticalScrollPosition [source](./references/docs/start/upgrade guide/upgrade guide.md scroll utils)
BREAKING: date utils addToDate and subtractFromDate property names normalized (e.g., year years , month months ) [source](./references/docs/start/upgrade guide/upgrade guide.md date utils)
BREAKING: QPopupEdit must now use the default slot with v slot="scope" for performance [source](./references/docs/start/upgrade guide/upgrade guide.md qpopupedit)
BREAKING: GoBack directive removed; use router reference ( $router.back() or $router.go( 1) ) instead [source](./references/docs/start/upgrade guide/upgrade guide.md quasar directives)
NEW: useQuasar composable primary method for accessing the $q object within Composition API components
NEW: useMeta composable new way to define meta tags, replacing the now deprecated meta component property [source](./references/docs/start/upgrade guide/upgrade guide.md meta plugin)
NEW: QTable props added table row style fn , table row class fn , grid style fn , and grid class fn in v2.18.0 [source](./references/repos/quasarframework/quasar/releases/vquasar v2.18.0.md new)
Also changed: useFormChild() new composable · QOptionsGroup props option value , option label , option disable new v2.17.0 · QUploader prop thumbnail fit new v2.17.0 · QSelect prop disable tab select new v2.17.0 · QMenu / QBtnDropdown no esc dismiss new v2.18.0 · evt.qAvoidFocus new flag v2.18.0 · QDate model value no longer contains changed prop · QPagination prop gutter new · QImg props loading , crossorigin , fit new · Dialog plugin custom component props moved to componentProps · Loading plugin uses html: true for HTML content instead of sanitize · App.vue wrapper <div id="q app" removed · .sync modifier replaced by v model:propName
Best Practices
Use q app/wrappers instead of quasar/wrappers for defining configurations and boot files — provides superior type inference and alignment with modern Quasar CLI [source](./references/docs/quasar cli vite/upgrade guide.md:L256:258)
Use Regle as the recommended validation library for QInput and QField — provides a robust, externalized validation logic compared to inline rules [source](./references/docs/vue components/input.md:L319)
Prefer responsive CSS classes (e.g., gt sm , lt md ) over the Screen plugin in JavaScript — minimizes re renders and layout shifts by leveraging CSS media queries directly [source](./references/docs/options/screen plugin.md:L5)
Bootstrap custom dialog components with the useDialogPluginComponent composable — handles the complex internal communication and lifecycle requirements of the Dialog plugin automatically [source](./references/docs/vue composables/use dialog plugin component.md:L13:30)
Enable the no transition prop on QTree when rendering large datasets — significantly improves runtime performance by skipping expensive expansion/collapse animations [source](./references/docs/vue components/tree.md:L31)
Use Quasar's useInterval and useTimeout composables over native browser timers — ensures automatic cancellation and memory cleanup when the component is unmounted [source](./references/docs/vue composables/use interval.md:L8:11)
Place QPullToRefresh as a direct child of QPage when using QLayout — ensures correct scroll event interception and native like pull behavior within the layout container [source](./references/docs/vue components/pull to refresh.md:L42)
Avoid setting Dark mode to auto in SSR applications — prevents the "flicker" effect where the server renders light mode before the client synchronizes with system preferences [source](./references/docs/quasar plugins/dark.md:L85:87)
Do not use v model with QRouteTab components — the active state is derived directly from the current route, and manual model updates will not trigger navigation [source](./references/docs/vue components/tabs.md:L128:132)
Prefer the Loading Bar Plugin over manual QAjaxBar component instances — provides a simpler, globally managed progress indicator for all Ajax calls without per page wiring [source](./references/docs/vue components/ajax bar.md:L18:19)