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)