Below is a **cheat-sheet of the Quasar components most teams reach for first**, each with a minimal syntax example and the *props/events you’ll touch 90 % of the time*. (For exhaustive API cards, jump to the linked docs pages.)
| **QField** | `vue<br><q-field label="Label"><template #control>…</template></q-field>` | Gives any custom control a Quasar-style label, hint, error/validation and dense/outlined looks. |
| **QInput** | `vue<br><q-input v-model="text" outlined label="Name" />` | Text / number / email etc. input with masks, debounced `v-model`, built-in rules & slots. |
| **QOptionGroup** | `vue<br><q-option-group v-model="picked" :options="opts" type="checkbox" />` | Renders a whole list of radios / checkboxes / toggles in one shot, keeping models in sync. |
| **QBtnToggle** | `vue<br><q-btn-toggle v-model="view" :options="opt" toggle-color="primary" />` | Segmented-control alternative to radios, but looking like grouped buttons. |
| **QSlider** | `vue<br><q-slider v-model="age" :min="0" :max="100" />` | Single-thumb numeric slider with discrete or continuous steps. |
| **QRange** | `vue<br><q-range v-model="range" :min="0" :max="100" />` | Dual-thumb range selector for min/max numeric values. |
| **QKnob** | `vue<br><q-knob v-model="vol" :max="100" />` | Rotary dial (built on `QCircularProgress`) for coarse or fine-grained numeric input. |
| **QRating** | `vue<br><q-rating v-model="stars" :max="5" />` | Star (or custom icon) rating picker that can be readonly or interactive. |
| **QFile** | `vue<br><q-file v-model="files" multiple label="Choose files" />` | File-chooser that returns `FileList` or `Array<File>` and shows previews/count. |
| **QUploader** | `vue<br><q-uploader url="/api/upload" label="Upload" />` | Drag-and-drop or click-to-upload component with queue, retry and progress bars. |
| **QColor** | `vue<br><q-color v-model="hex" format="hex" />` | Inline or pop-up color picker with HEX/RGB/HSV and palette presets. |
| **QDate** | `vue<br><q-date v-model="day" mask="YYYY-MM-DD" />` | Calendar date picker (Gregorian & Persian); supports ranges and shortcuts. |
| **QTime** | `vue<br><q-time v-model="time" format24h />` | Clock-face or input-field time picker with seconds, intervals and AM/PM/24-h modes. |
| **QEditor** | `vue<br><q-editor v-model="html" min-height="10rem" />` | Full WYSIWYG rich-text editor that reads/writes HTML and lets you extend its toolbar. |
These inputs plug straight into **QForm** validation and inherit Quasar’s design-system props (`color`, `dense`, `dark`, *etc.*)
Below are **all Quasar components that were *not* covered in the previous cheat-sheet**, with a **one-line syntax sample** and a **very short “what it’s for” blurb**.
| **QImg** | `<q-img src="banner.jpg" ratio="16/9" />` | Optimised image with lazy-load and blur-up placeholder. |
| **QInfiniteScroll** | `<q-infinite-scroll @load="fetchMore">…</q-infinite-scroll>` | Auto-loads more data when scrolled near bottom. |
| **QIntersection** | `<q-intersection transition="scale">…</q-intersection>` | Emits events when element enters/leaves viewport. |
| **QLinearProgress** | `<q-linear-progress value="0.6" color="primary" />` | Horizontal progress bar, determinate or indeterminate. |
| **QList / QItem** | `<q-list bordered><q-item><q-item-section>Row</q-item-section></q-item></q-list>` | Vertical list rows with rich slots; ideal for menus or data lists. |
| **QMarkupTable** | `<q-markup-table flat :rows="rows" :columns="cols" />` | Static HTML table—lightweight alternative to `QTable`. |
| **QMenu** | `<q-menu anchor="bottom right"><q-list>…</q-list></q-menu>` | Context pop-over anchored to any element. |
| **QNoSsr** | `<q-no-ssr><client-only-widget/></q-no-ssr>` | Renders slot only on client (skips SSR). |
| **QPopupEdit** | `vue<br><q-popup-edit v-model="qty"><q-input type="number" /></q-popup-edit>` | “Click-to-edit” helper: turns any label or cell into an inline editable pop-up. |
| **QResizeObserver** | `<q-resize-observer @resize="onSize" />` | Fires event whenever the parent DOM element changes size. |
| **QScrollObserver** | `<q-scroll-observer @scroll="onScroll" />` | Emits position & direction as the page/container scrolls. |
| **QVideo** | `<q-video src="https://youtu.be/abc" ratio="16/9" />` | Responsive embedded video player (HTML5, YouTube, Vimeo). |
| **QVirtualScroll** | `<q-virtual-scroll :items="bigList" :item-size="48" v-slot="item">{{ item }}</q-virtual-scroll>` | Renders only visible rows for huge lists—boosts performance. |
> **Note:** All these components share Quasar’s global props (`dark`, `dense`, `size`, `color`, etc.) and are tree-shakable—import only what you use for lean bundles.
| **Meta** | `$q.meta.setMeta({ title:'App' })` | Non-composable way to manage `<head>` tags. |
Plugins are auto-installed; access them through **`$q`** (option API) or via `useQuasar()` in the composition API.
Reference in New Issue
Block a user
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
