From b37cb8b8ed2c615429eb557725160ab6cdc1bb09 Mon Sep 17 00:00:00 2001 From: Killian-Aidalinfo Date: Sun, 23 Mar 2025 03:03:39 +0100 Subject: [PATCH] Add llms and llms-full for context for coding agent --- docs/public/llms-full.txt | 69401 ++++++++++++++++++++++++++++++++++++ docs/public/llms.txt | 14 + 2 files changed, 69415 insertions(+) create mode 100644 docs/public/llms-full.txt create mode 100644 docs/public/llms.txt diff --git a/docs/public/llms-full.txt b/docs/public/llms-full.txt new file mode 100644 index 00000000000..0012a21956d --- /dev/null +++ b/docs/public/llms-full.txt @@ -0,0 +1,69401 @@ +# https://quasar.dev llms-full.txt + +## Cross-Platform Vue.js Framework +# The enterprise-ready cross-platform VueJs framework + +Are you ready to lift off?_arrow\_downward_ + +Our Platinum sponsors + +Full sponsor's list + +## Why should you choose Quasar? + +_![](https://cdn.quasar.dev/img/custom-svg-icons/components.svg)_ + +Top Class Components + +A library of more than 70 high performance customizable Material Design web components for all your needs + +[Browse components](https://quasar.dev/components) + +_![](https://cdn.quasar.dev/img/custom-svg-icons/source.svg)_ + +One codebase many integrations + +Keep your favorite technology, we provide all the needed integrations out of the box. + +[Discover Integrations](https://quasar.dev/integrations) + +_![](https://cdn.quasar.dev/img/custom-svg-icons/documentation.svg)_ + +Great documentation + +All the details you deserve to start working properly. Every star-pilot needs a good manual. + +[Get Started](https://quasar.dev/start/quick-start) + +_![](https://cdn.quasar.dev/img/custom-svg-icons/astronaut.svg)_ + +## What our community thinks of Quasar + +You've never heard of Quasar? It's the framework that made a mobile app, + +desktop app and browser extension altogether in less than 12 minutes. + +![](https://cdn.quasar.dev/img/tweets/NVIct2bL_x96.jpg) + +Alvaro Sabu + +@alvarosabu + +I must say Im quite surprise how complete @quasarframework is, been working on a really complex select component and it works like charm. Very well documented. + +6:39 PM · Oct 16, 2020 from Terrassa, España + +[Read on Twitter](https://twitter.com/alvarosabu/status/1317128110509379585) + +![](https://cdn.quasar.dev/img/tweets/gz0OLObO_x96.jpg) + +Dale Zak + +@dalezak + +Ok, I’m really impressed with the @QuasarFramework, great documentation and powerful framework for building #iOS, #Android, #PWA and #SPA apps using #VueJS https://quasar.dev 🤩 + +7:39 PM · May 7, 2020 from Saskatoon, Saskatchewan + +[Read on Twitter](https://twitter.com/dalezak/status/1258436297087086594) + +![](https://cdn.quasar.dev/img/tweets/nCM554Ai_x96.jpg) + +Gregory Luneau + +@LuneauGregory + +Quasar is the best thing since sliced bread. + +6:51 PM · May 28, 2021 + +[Read on Twitter](https://twitter.com/LuneauGregory/status/1398305954882543616) + +![](https://cdn.quasar.dev/img/tweets/a8_JRn1d_x96.jpg) + +Tony OHagan + +@tony\_ohagan + +Quasar listen .. I've submitted several suggestions which they acted on (😍 QSplitter, line-awesome icons and Icon genie!). Optimised rock solid components and best docs & examples in the business save me time and money every week. #QuasarLove #quasarframework + +12:59 PM · Jan 20, 2022 + +[Read on Twitter](https://twitter.com/tony_ohagan/status/1484118254193094656) + +![](https://cdn.quasar.dev/img/tweets/ZSyt7Dpc_x96.jpg) + +Marco Ruiz + +@estados + +I love #quasarframework because I can make great web, mobile and desktop applications with a single code base. It's organized and clean, has an active community, and is at the forefront of innovation. #QuasarLove ❤ + +10:28 PM · Jan 19, 2022 + +[Read on Twitter](https://twitter.com/estados/status/1483899151129751554) + +![](https://cdn.quasar.dev/img/tweets/uTY9chHX_x96.jpg) + +Navicstein + +@NavicsteinR + +Very very ahead, i wish there could be a world blaster to notify all Vue users that a framework like quasar exist! + +10:28 PM · Jan 19, 2022 + +[Read on Twitter](https://twitter.com/NavicsteinR/status/1189641922182307840) + +![](https://cdn.quasar.dev/img/tweets/ZgJxRWD9_x96.jpg) + +programmerq.wallet + +@Qoyyuum + +I love how #quasarframework is so versatile. Easy copy and paste components and UI elements (especially for a crappy designer like me) and quick x-platform deploy is amazingly easy! #QuasarLove + +11:49 AM · Jan 19, 2022 + +[Read on Twitter](https://twitter.com/Qoyyuum/status/1483738286128758785) + +![](https://cdn.quasar.dev/img/tweets/nZ2PbTV1_x96.jpg) + +Mauricio Etcheverry + +@maurietchev + +I'm gonna marry @quasarframework. It was love at first sight ♥️♥️♥️ + +4:25 PM · Dec 23, 2019 + +[Read on Twitter](https://twitter.com/maurietchev/status/1209117858904629248) + +![](https://cdn.quasar.dev/img/tweets/wTSVDHBO_x96.jpg) + +radioActive DROID + +@gpproton + +Quasar really save you from toiling away with third party dependencies #QuasarLove #quasarframework + +2:06 PM · Jan 19, 2022 + +[Read on Twitter](https://twitter.com/gpproton/status/1483772969822343168) + +![](https://cdn.quasar.dev/img/tweets/jDxh4Bi5_x96.png) + +Ali Ataf + +@AliAttaf1 + +There is no situation I needed to make an !important override to the Quasar framework. It's just there, everything you will face will already be in their consideration. #QuasarLove #quasarframework + +9:19 PM · Jan 22, 2022 + +[Read on Twitter](https://twitter.com/AliAttaf1/status/1484969068218265611) + +![](https://cdn.quasar.dev/img/tweets/Photo_9_x96.jpg) + +Shawn Makinson + +@smakinson + +I've used #quasarframework for websites, mobile & interactive touch via electron for museum & welcome center display. It's flexible, reliable, powerful and fast. Thank you Razvan & team as well as the community! #QuasarLove + +8:32 PM · Jan 20, 2022 + +[Read on Twitter](https://twitter.com/smakinson/status/1484232499136016392) + +![](https://cdn.quasar.dev/img/tweets/FhA-7oua_x96.jpeg) + +Simon Swain + +@simon\_swain + +Gotta throw some love out there for @quasarframework -- it really does make things stupidly easy and fast to build. + +9:23 AM · Sep 2, 2020 + +[Read on Twitter](https://twitter.com/simon_swain/status/1301043009987866624) + +![](https://cdn.quasar.dev/img/tweets/R8iWV7es_x96.jpg) + +hyranity + +@hyranity + +Code faster and smarter with the best Vue framework. Your brain will thank you. #quasarframework. #QuasarLove + +2:51 PM · Jan 19, 2022 + +[Read on Twitter](https://twitter.com/hyranity/status/1483784231017148420) + +## SPONSOR QUASAR, HELP THE PROJECT GROW! + +Working for a company? Are you a freelancer? You can contribute, even a bit, and even get something back in return. + +So, um, we think we should discuss the bonus situation [Consult tiers](https://donate.quasar.dev/) + +_![](https://cdn.quasar.dev/img/custom-svg-icons/medal.svg)_ + +## Our Sponsors + +Every space odyssey has its patrons + +platinum Sponsors + +silver Sponsors + +![](https://cdn.quasar.dev/img/landing-page/planet.png) + +_![](https://cdn.quasar.dev/img/custom-svg-icons/satellite.svg)_ + +Don't miss the news + +Follow our social pages to stay up to date + +[Discord](https://chat.quasar.dev/) [Forum](https://forum.quasar.dev/) [X (Twitter)](https://twitter.quasar.dev/) [Facebook](https://facebook.quasar.dev/) + +* * * + +[MIT License](https://github.com/quasarframework/quasar/blob/dev/LICENSE) [Privacy Policy](https://www.iubenda.com/privacy-policy/40685560) + +Copyright © 2015-present PULSARDEV SRL, [Razvan Stoenescu](https://github.com/rstoenescu) + +This website has been designed in collaboration with [Dreamonkey Srl](https://www.dreamonkey.com/) + +## Quasar Framework Docs +[_assignment\_late_\\ +\\ +Why donate](https://quasar.dev/why-donate) [_travel\_explore_\\ +\\ +API Explorer](https://quasar.dev/api-explorer) + +_code_ + +How to contribute + +[Contribution Guide](https://quasar.dev/how-to-contribute/contribution-guide) [Running Projects](https://quasar.dev/how-to-contribute/running-projects) [Start a New Project](https://quasar.dev/how-to-contribute/new-project) [Project Maintainer Role](https://quasar.dev/how-to-contribute/project-maintainer) [Commit Conventions](https://quasar.dev/how-to-contribute/commit-conventions) + +_tune_ + +Options & Helpers + +[The $q object](https://quasar.dev/options/the-q-object) [App Icons](https://quasar.dev/options/app-icons) [SEO](https://quasar.dev/options/seo) [Quasar Language Packs](https://quasar.dev/options/quasar-language-packs) [App Internationalization](https://quasar.dev/options/app-internationalization) [RTL Support](https://quasar.dev/options/rtl-support) [Installing Icon Libraries](https://quasar.dev/options/installing-icon-libraries) [Quasar Icon Sets](https://quasar.dev/options/quasar-icon-sets) [Platform Detection](https://quasar.dev/options/platform-detection) [Screen Plugin](https://quasar.dev/options/screen-plugin) [Animations](https://quasar.dev/options/animations) [Transitions](https://quasar.dev/options/transitions) + +_style_ + +Style & Identity + +[Typography](https://quasar.dev/style/typography) [Color Palette](https://quasar.dev/style/color-palette) [Theme Builder](https://quasar.dev/style/theme-builder) [Dark Mode](https://quasar.dev/style/dark-mode) [Spacing](https://quasar.dev/style/spacing) [Shadows](https://quasar.dev/style/shadows) [Breakpoints](https://quasar.dev/style/breakpoints) [Body classes](https://quasar.dev/style/body-classes) [Visibility](https://quasar.dev/style/visibility) [Positioning](https://quasar.dev/style/positioning) [Sass/SCSS Variables](https://quasar.dev/style/sass-scss-variables) [Other Helper Classes](https://quasar.dev/style/other-helper-classes) + +_view\_quilt_ + +Layout and Grid + +Flex Grid + +[Introduction to Flexbox](https://quasar.dev/layout/grid/introduction-to-flexbox) [Grid Row](https://quasar.dev/layout/grid/row) [Grid Column](https://quasar.dev/layout/grid/column) [Grid Gutter](https://quasar.dev/layout/grid/gutter) [Flexbox patterns](https://quasar.dev/layout/grid/flexbox-patterns) [Flex Playground](https://quasar.dev/layout/grid/flex-playground) + +[Layout](https://quasar.dev/layout/layout) [Routing with Layouts and Pages](https://quasar.dev/layout/routing-with-layouts-and-pages) [Layout Header and Footer](https://quasar.dev/layout/header-and-footer) [Layout Drawer](https://quasar.dev/layout/drawer) [Layout Page](https://quasar.dev/layout/page) [Layout Builder](https://quasar.dev/layout-builder) [Layout Gallery](https://quasar.dev/layout/gallery) [Page Sticky](https://quasar.dev/layout/page-sticky) [Page Scroller](https://quasar.dev/layout/page-scroller) + +_widgets_ + +Vue Components + +[Ajax Bar](https://quasar.dev/vue-components/ajax-bar) [Avatar](https://quasar.dev/vue-components/avatar) [Badge](https://quasar.dev/vue-components/badge) [Banner](https://quasar.dev/vue-components/banner) [Bar](https://quasar.dev/vue-components/bar) [Breadcrumbs](https://quasar.dev/vue-components/breadcrumbs) + +Buttons + +[Button](https://quasar.dev/vue-components/button) [Button Group](https://quasar.dev/vue-components/button-group) [Button Dropdown](https://quasar.dev/vue-components/button-dropdown) + +[Card](https://quasar.dev/vue-components/card) [Carousel](https://quasar.dev/vue-components/carousel) [Chat Message](https://quasar.dev/vue-components/chat) [Chip](https://quasar.dev/vue-components/chip) [Circular Progress](https://quasar.dev/vue-components/circular-progress) [Color Picker](https://quasar.dev/vue-components/color-picker) [Dialog](https://quasar.dev/vue-components/dialog) [Editor - WYSIWYG](https://quasar.dev/vue-components/editor) [Expansion Item](https://quasar.dev/vue-components/expansion-item) [Floating Action Button](https://quasar.dev/vue-components/floating-action-button) + +Form Components + +[Input Textfield](https://quasar.dev/vue-components/input) [Select](https://quasar.dev/vue-components/select) [File picker](https://quasar.dev/vue-components/file) [Form](https://quasar.dev/vue-components/form) [Field (wrapper)](https://quasar.dev/vue-components/field) [Radio](https://quasar.dev/vue-components/radio) [Checkbox](https://quasar.dev/vue-components/checkbox) [Toggle](https://quasar.dev/vue-components/toggle) [Button Toggle](https://quasar.dev/vue-components/button-toggle) [Option Group](https://quasar.dev/vue-components/option-group) [Slider](https://quasar.dev/vue-components/slider) [Range](https://quasar.dev/vue-components/range) [Time Picker](https://quasar.dev/vue-components/time) [Date Picker](https://quasar.dev/vue-components/date) + +[Icon](https://quasar.dev/vue-components/icon) [Img](https://quasar.dev/vue-components/img) [Infinite Scroll](https://quasar.dev/vue-components/infinite-scroll) [Inner Loading](https://quasar.dev/vue-components/inner-loading) [Intersection](https://quasar.dev/vue-components/intersection) [Knob](https://quasar.dev/vue-components/knob) [Linear Progress](https://quasar.dev/vue-components/linear-progress) [List & List Items](https://quasar.dev/vue-components/list-and-list-items) [Markup Table](https://quasar.dev/vue-components/markup-table) [Menu](https://quasar.dev/vue-components/menu) [No SSR](https://quasar.dev/vue-components/no-ssr) + +Observers + +[Resize Observer (for Element)](https://quasar.dev/vue-components/resize-observer) [Scroll Observer](https://quasar.dev/vue-components/scroll-observer) + +[Pagination](https://quasar.dev/vue-components/pagination) [Parallax](https://quasar.dev/vue-components/parallax) [Popup Edit](https://quasar.dev/vue-components/popup-edit) [Popup Proxy](https://quasar.dev/vue-components/popup-proxy) [Pull to refresh](https://quasar.dev/vue-components/pull-to-refresh) [Rating](https://quasar.dev/vue-components/rating) [Responsive](https://quasar.dev/vue-components/responsive) [Scroll Area](https://quasar.dev/vue-components/scroll-area) [Separator](https://quasar.dev/vue-components/separator) [Skeleton](https://quasar.dev/vue-components/skeleton) [Slide Item](https://quasar.dev/vue-components/slide-item) [Slide Transition](https://quasar.dev/vue-components/slide-transition) [Space](https://quasar.dev/vue-components/space) [Spinners](https://quasar.dev/vue-components/spinners) [Splitter](https://quasar.dev/vue-components/splitter) [Stepper](https://quasar.dev/vue-components/stepper) [Table](https://quasar.dev/vue-components/table) [Tabs](https://quasar.dev/vue-components/tabs) [Tab Panels](https://quasar.dev/vue-components/tab-panels) [Timeline](https://quasar.dev/vue-components/timeline) [Toolbar](https://quasar.dev/vue-components/toolbar) [Tooltip](https://quasar.dev/vue-components/tooltip) [Tree](https://quasar.dev/vue-components/tree) [Uploader](https://quasar.dev/vue-components/uploader) [Video](https://quasar.dev/vue-components/video) [Virtual Scroll](https://quasar.dev/vue-components/virtual-scroll) + +_swap\_calls_ + +Vue Directives + +[Close Popup](https://quasar.dev/vue-directives/close-popup) [Intersection](https://quasar.dev/vue-directives/intersection) [Material Ripples](https://quasar.dev/vue-directives/material-ripples) [Mutation](https://quasar.dev/vue-directives/mutation) [Morph](https://quasar.dev/vue-directives/morph) [Scroll](https://quasar.dev/vue-directives/scroll) [Scroll Fire](https://quasar.dev/vue-directives/scroll-fire) [Touch Hold](https://quasar.dev/vue-directives/touch-hold) [Touch Pan](https://quasar.dev/vue-directives/touch-pan) [Touch Repeat](https://quasar.dev/vue-directives/touch-repeat) [Touch Swipe](https://quasar.dev/vue-directives/touch-swipe) + +_extension_ + +Quasar Plugins + +[Addressbar Color](https://quasar.dev/quasar-plugins/addressbar-color) [App Fullscreen](https://quasar.dev/quasar-plugins/app-fullscreen) [App Visibility](https://quasar.dev/quasar-plugins/app-visibility) [Bottom Sheet](https://quasar.dev/quasar-plugins/bottom-sheet) [Cookies](https://quasar.dev/quasar-plugins/cookies) [Dark](https://quasar.dev/quasar-plugins/dark) [Dialog](https://quasar.dev/quasar-plugins/dialog) [Loading](https://quasar.dev/quasar-plugins/loading) [Loading Bar](https://quasar.dev/quasar-plugins/loading-bar) [Local/Session Storage](https://quasar.dev/quasar-plugins/web-storage) [Meta](https://quasar.dev/quasar-plugins/meta) [Notify](https://quasar.dev/quasar-plugins/notify) + +_developer\_mode_ + +Vue Composables + +[useQuasar](https://quasar.dev/vue-composables/use-quasar) [useDialogPluginComponent](https://quasar.dev/vue-composables/use-dialog-plugin-component) [useFormChild](https://quasar.dev/vue-composables/use-form-child) [useMeta](https://quasar.dev/vue-composables/use-meta) [useHydration\\ +\\ +new](https://quasar.dev/vue-composables/use-hydration) [useId\\ +\\ +new](https://quasar.dev/vue-composables/use-id) [useInterval\\ +\\ +new](https://quasar.dev/vue-composables/use-interval) [useRenderCache\\ +\\ +new](https://quasar.dev/vue-composables/use-render-cache) [useTick\\ +\\ +new](https://quasar.dev/vue-composables/use-tick) [useTimeout\\ +\\ +new](https://quasar.dev/vue-composables/use-timeout) [useSplitAttrs\\ +\\ +new](https://quasar.dev/vue-composables/use-split-attrs) + +_security_ + +Security + +[DO's and DON'Ts](https://quasar.dev/security/dos-and-donts) [Report a vulnerability](https://quasar.dev/security/report-a-vulnerability) + +_build_ + +Quasar CLI (with Vite) + +[Upgrade guide\\ +\\ +NEW!](https://quasar.dev/quasar-cli-vite/upgrade-guide) [The quasar.config file](https://quasar.dev/quasar-cli-vite/quasar-config-file) [Convert project to CLI with Vite](https://quasar.dev/quasar-cli-vite/convert-to-quasar-cli-with-vite) [Browser Compatibility](https://quasar.dev/quasar-cli-vite/browser-compatibility) [Supporting TypeScript](https://quasar.dev/quasar-cli-vite/supporting-ts) [Directory Structure](https://quasar.dev/quasar-cli-vite/directory-structure) [Commands List](https://quasar.dev/quasar-cli-vite/commands-list) [CSS Preprocessors](https://quasar.dev/quasar-cli-vite/css-preprocessors) [Routing](https://quasar.dev/quasar-cli-vite/routing) [Lazy Loading - Code Splitting](https://quasar.dev/quasar-cli-vite/lazy-loading) [Handling Assets](https://quasar.dev/quasar-cli-vite/handling-assets) [Boot Files](https://quasar.dev/quasar-cli-vite/boot-files) [Prefetch Feature](https://quasar.dev/quasar-cli-vite/prefetch-feature) [API Proxying](https://quasar.dev/quasar-cli-vite/api-proxying) [Handling Vite](https://quasar.dev/quasar-cli-vite/handling-vite) [Handling process.env](https://quasar.dev/quasar-cli-vite/handling-process-env) [State Management with Pinia](https://quasar.dev/quasar-cli-vite/state-management-with-pinia) [Linter](https://quasar.dev/quasar-cli-vite/linter) [Testing & Auditing](https://quasar.dev/quasar-cli-vite/testing-and-auditing) + +SPA mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-spa/introduction) [App Icons for SPA](https://quasar.dev/quasar-cli-vite/developing-spa/app-icons-spa) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-spa/build-commands) [Deploying](https://quasar.dev/quasar-cli-vite/developing-spa/deploying) + +SSR mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-ssr/introduction) [Writing Universal Code](https://quasar.dev/quasar-cli-vite/developing-ssr/writing-universal-code) [Preparation](https://quasar.dev/quasar-cli-vite/developing-ssr/preparation) [Configuring SSR](https://quasar.dev/quasar-cli-vite/developing-ssr/configuring-ssr) [ssrContext](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-context) [SSR Middleware](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-middleware) [SSR Webserver](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-webserver) [Vue SSR Directives](https://quasar.dev/quasar-cli-vite/developing-ssr/vue-ssr-directives) [App Icons for SSR](https://quasar.dev/quasar-cli-vite/developing-ssr/app-icons-ssr) [SEO for SSR](https://quasar.dev/quasar-cli-vite/developing-ssr/seo-for-ssr) [Client Side Hydration](https://quasar.dev/quasar-cli-vite/developing-ssr/client-side-hydration) [Handling 404 and 500 Errors](https://quasar.dev/quasar-cli-vite/developing-ssr/handling-404-and-500-errors) [SSR with PWA](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-with-pwa) [SSR FAQ](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-frequently-asked-questions) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-ssr/build-commands) [SSR with Typescript](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-with-typescript) [Deploying](https://quasar.dev/quasar-cli-vite/developing-ssr/deploying) + +PWA mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-pwa/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-pwa/preparation) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-pwa/build-commands) [Configuring PWA](https://quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa) [HMR for PWA](https://quasar.dev/quasar-cli-vite/developing-pwa/hmr-for-dev) [App Icons for PWA](https://quasar.dev/quasar-cli-vite/developing-pwa/app-icons-pwa) [Handling Service Worker](https://quasar.dev/quasar-cli-vite/developing-pwa/handling-service-worker) [PWA with Typescript](https://quasar.dev/quasar-cli-vite/developing-pwa/pwa-with-typescript) + +[Developing Mobile Apps](https://quasar.dev/quasar-cli-vite/developing-mobile-apps) + +Capacitor mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/preparation) [Capacitor versions](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/capacitor-version-support) [Configuring Capacitor](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/configuring-capacitor) [App Icons for Capacitor](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/app-icons-capacitor) [Capacitor API](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/capacitor-api) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/publishing-to-store) + +Cordova mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/preparation) [Configuring Cordova](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/configuring-cordova) [App Icons for Cordova](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/app-icons-cordova) [Cordova Plugins](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/cordova-plugins) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/publishing-to-store) + +Electron mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-electron-apps/introduction) [Upgrade guide](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-upgrade-guide) [Preparation](https://quasar.dev/quasar-cli-vite/developing-electron-apps/preparation) [Configuring Electron](https://quasar.dev/quasar-cli-vite/developing-electron-apps/configuring-electron) [App Icons for Electron](https://quasar.dev/quasar-cli-vite/developing-electron-apps/app-icons-electron) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-electron-apps/build-commands) [Preload Script](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-preload-script) [Electron Packages](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-packages) [Accessing files](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-accessing-files) [Frameless Electron Window](https://quasar.dev/quasar-cli-vite/developing-electron-apps/frameless-electron-window) [Electron with Typescript](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-with-typescript) [Electron Security Concerns](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-security-concerns) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-vite/developing-electron-apps/troubleshooting-and-tips) + +Browser Extensions mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/preparation) [Configuring BEX](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex) [App Icons for BEX](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/app-icons-browser-extension) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/build-commands) [Types of BEX](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/types-of-bex) [BEX Bridge Communication](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/bex-bridge) [Background Script](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/background-script) [Content Scripts](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/content-scripts) + +[Ajax Requests](https://quasar.dev/quasar-cli-vite/ajax-requests) [Opening Dev Server To Public](https://quasar.dev/quasar-cli-vite/opening-dev-server-to-public) + +_build_ + +Quasar CLI (with Webpack) + +[Upgrade guide\\ +\\ +NEW!](https://quasar.dev/quasar-cli-webpack/upgrade-guide) [The quasar.config file](https://quasar.dev/quasar-cli-webpack/quasar-config-file) [Convert to CLI with Webpack](https://quasar.dev/quasar-cli-webpack/convert-to-quasar-cli-with-webpack) [Browser Compatibility](https://quasar.dev/quasar-cli-webpack/browser-compatibility) [Supporting TypeScript](https://quasar.dev/quasar-cli-webpack/supporting-ts) [Directory Structure](https://quasar.dev/quasar-cli-webpack/directory-structure) [Commands List](https://quasar.dev/quasar-cli-webpack/commands-list) [CSS Preprocessors](https://quasar.dev/quasar-cli-webpack/css-preprocessors) [Routing](https://quasar.dev/quasar-cli-webpack/routing) [Lazy Loading - Code Splitting](https://quasar.dev/quasar-cli-webpack/lazy-loading) [Handling Assets](https://quasar.dev/quasar-cli-webpack/handling-assets) [Boot Files](https://quasar.dev/quasar-cli-webpack/boot-files) [Prefetch Feature](https://quasar.dev/quasar-cli-webpack/prefetch-feature) [API Proxying](https://quasar.dev/quasar-cli-webpack/api-proxying) [Handling Webpack](https://quasar.dev/quasar-cli-webpack/handling-webpack) [Handling process.env](https://quasar.dev/quasar-cli-webpack/handling-process-env) [State Management with Pinia](https://quasar.dev/quasar-cli-webpack/state-management-with-pinia) [Linter](https://quasar.dev/quasar-cli-webpack/linter) [Testing & Auditing](https://quasar.dev/quasar-cli-webpack/testing-and-auditing) + +SPA mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-spa/introduction) [App Icons for SPA](https://quasar.dev/quasar-cli-webpack/developing-spa/app-icons-spa) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-spa/build-commands) [Deploying](https://quasar.dev/quasar-cli-webpack/developing-spa/deploying) + +SSR mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-ssr/introduction) [Writing Universal Code](https://quasar.dev/quasar-cli-webpack/developing-ssr/writing-universal-code) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-ssr/preparation) [Configuring SSR](https://quasar.dev/quasar-cli-webpack/developing-ssr/configuring-ssr) [ssrContext](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-context) [SSR Middleware](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-middleware) [SSR Webserver](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-webserver) [Vue SSR Directives](https://quasar.dev/quasar-cli-webpack/developing-ssr/vue-ssr-directives) [App Icons for SSR](https://quasar.dev/quasar-cli-webpack/developing-ssr/app-icons-ssr) [SEO for SSR](https://quasar.dev/quasar-cli-webpack/developing-ssr/seo-for-ssr) [Client Side Hydration](https://quasar.dev/quasar-cli-webpack/developing-ssr/client-side-hydration) [Handling 404 and 500 Errors](https://quasar.dev/quasar-cli-webpack/developing-ssr/handling-404-and-500-errors) [SSR with PWA](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-with-pwa) [SSR FAQ](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-frequently-asked-questions) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-ssr/build-commands) [SSR with Typescript](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-with-typescript) [Deploying](https://quasar.dev/quasar-cli-webpack/developing-ssr/deploying) + +PWA mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-pwa/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-pwa/preparation) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-pwa/build-commands) [Configuring PWA](https://quasar.dev/quasar-cli-webpack/developing-pwa/configuring-pwa) [HMR for PWA](https://quasar.dev/quasar-cli-webpack/developing-pwa/hmr-for-dev) [App Icons for PWA](https://quasar.dev/quasar-cli-webpack/developing-pwa/app-icons-pwa) [Handling Service Worker](https://quasar.dev/quasar-cli-webpack/developing-pwa/handling-service-worker) [PWA with Typescript](https://quasar.dev/quasar-cli-webpack/developing-pwa/pwa-with-typescript) + +[Developing Mobile Apps](https://quasar.dev/quasar-cli-webpack/developing-mobile-apps) + +Capacitor mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/preparation) [Capacitor versions](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/capacitor-version-support) [Configuring Capacitor](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/configuring-capacitor) [App Icons for Capacitor](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/app-icons-capacitor) [Capacitor API](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/capacitor-api) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/publishing-to-store) + +Cordova mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/preparation) [Configuring Cordova](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/configuring-cordova) [App Icons for Cordova](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/app-icons-cordova) [Cordova Plugins](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/cordova-plugins) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/publishing-to-store) + +Electron mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/introduction) [Upgrade guide](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-upgrade-guide) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/preparation) [Configuring Electron](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/configuring-electron) [App Icons for Electron](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/app-icons-electron) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/build-commands) [Preload Script](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-preload-script) [Electron Packages](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-packages) [Accessing files](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-accessing-files) [Frameless Electron Window](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/frameless-electron-window) [Electron with Typescript](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-with-typescript) [Electron Security Concerns](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-security-concerns) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/troubleshooting-and-tips) + +Browser Extensions mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/preparation) [Configuring BEX](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/configuring-bex) [App Icons for BEX](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/app-icons-browser-extension) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/build-commands) [Types of BEX](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/types-of-bex) [BEX Bridge Communication](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/bex-bridge) [Background Script](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/background-script) [Content Scripts](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/content-scripts) + +[Ajax Requests](https://quasar.dev/quasar-cli-webpack/ajax-requests) [Opening Dev Server To Public](https://quasar.dev/quasar-cli-webpack/opening-dev-server-to-public) + +_stars_ + +Icon Genie CLI + +[Introduction](https://quasar.dev/icongenie/introduction) [Installation / Upgrade notes](https://quasar.dev/icongenie/installation) [Command list](https://quasar.dev/icongenie/command-list) [App Icons List](https://quasar.dev/icongenie/app-icons-list) [Profile files](https://quasar.dev/icongenie/profile-files) + +_note\_add_ + +App Extensions + +[Introduction](https://quasar.dev/app-extensions/introduction) [Discover App Extensions](https://quasar.dev/app-extensions/discover) + +Development Guide + +[Introduction](https://quasar.dev/app-extensions/development-guide/introduction) [Prompts API](https://quasar.dev/app-extensions/development-guide/prompts-api) [Install API](https://quasar.dev/app-extensions/development-guide/install-api) [Index API](https://quasar.dev/app-extensions/development-guide/index-api) [Uninstall API](https://quasar.dev/app-extensions/development-guide/uninstall-api) + +Tips and Tricks + +[Introduction](https://quasar.dev/app-extensions/tips-and-tricks/introduction) [Provide a UI component](https://quasar.dev/app-extensions/tips-and-tricks/provide-a-ui-component) [Provide a directive](https://quasar.dev/app-extensions/tips-and-tricks/provide-a-directive) [Inject Quasar Plugin](https://quasar.dev/app-extensions/tips-and-tricks/inject-quasar-plugin) [Starter kit equivalent](https://quasar.dev/app-extensions/tips-and-tricks/starter-kit-equivalent) [Chain Webpack](https://quasar.dev/app-extensions/tips-and-tricks/chain-webpack) + +_healing_ + +Quasar Utils + +[Date Utils](https://quasar.dev/quasar-utils/date-utils) [Color Utils](https://quasar.dev/quasar-utils/color-utils) [DOM Utils](https://quasar.dev/quasar-utils/dom-utils) [Morph Utils](https://quasar.dev/quasar-utils/morph-utils) [Formatter Utils](https://quasar.dev/quasar-utils/formatter-utils) [Scrolling Utils](https://quasar.dev/quasar-utils/scrolling-utils) [Type Checking Utils](https://quasar.dev/quasar-utils/type-checking-utils) [EventBus Util](https://quasar.dev/quasar-utils/event-bus-util) [Other Utils](https://quasar.dev/quasar-utils/other-utils) + +Welcome to Quasar docs + +Here you can find everything you need to start working with Quasar. + +In the top navigation bar there is a search function that helps you find what you need and also many other pages that you can explore, like beginner resources and other cool content about the Quasar galaxy. Don't forget to check our page to [become a sponsor](https://donate.quasar.dev/)! + +If you are an experienced explorer get right into action: use the navigation drawer on the left to navigate through our most important technical resources. + +Most Used + +[QTable](https://quasar.dev/vue-components/table) [QInput](https://quasar.dev/vue-components/input) [QSelect](https://quasar.dev/vue-components/select) [_![](https://cdn.quasar.dev/img/custom-svg-icons/button-click.svg)_ \\ +\\ +QBtn](https://quasar.dev/vue-components/button) [QCard](https://quasar.dev/vue-components/card) [_![](https://cdn.quasar.dev/logo-v2/svg/logo-mono-cyan.svg)_ \\ +\\ +Flavour](https://quasar.dev/start/pick-quasar-flavour) + +* * * + +Discover Also + +[quasar.config](https://quasar.dev/quasar-cli-vite/quasar-config-js) [Boot Files](https://quasar.dev/quasar-cli-vite/boot-files) [Date Utils](https://quasar.dev/quasar-utils/date-utils) [_healing_ \\ +\\ +Other Utils](https://quasar.dev/quasar-utils/other-utils) [Flexbox](https://quasar.dev/layout/grid/introduction-to-flexbox) [Animations](https://quasar.dev/options/animations) + +[MIT License](https://github.com/quasarframework/quasar/blob/dev/LICENSE) [Privacy Policy](https://www.iubenda.com/privacy-policy/40685560) + +Copyright © 2015-present PULSARDEV SRL, [Razvan Stoenescu](https://github.com/rstoenescu) + +This website has been designed in collaboration with [Dreamonkey Srl](https://www.dreamonkey.com/) + +Our third-party tools use cookies, which are necessary for its functioning and required to achieve the purposes illustrated in the cookie policy. + +AcceptLearn more + +## Quasar Components Overview +[_assignment\_late_\\ +\\ +Why donate](https://quasar.dev/why-donate) [_travel\_explore_\\ +\\ +API Explorer](https://quasar.dev/api-explorer) + +_code_ + +How to contribute + +[Contribution Guide](https://quasar.dev/how-to-contribute/contribution-guide) [Running Projects](https://quasar.dev/how-to-contribute/running-projects) [Start a New Project](https://quasar.dev/how-to-contribute/new-project) [Project Maintainer Role](https://quasar.dev/how-to-contribute/project-maintainer) [Commit Conventions](https://quasar.dev/how-to-contribute/commit-conventions) + +_tune_ + +Options & Helpers + +[The $q object](https://quasar.dev/options/the-q-object) [App Icons](https://quasar.dev/options/app-icons) [SEO](https://quasar.dev/options/seo) [Quasar Language Packs](https://quasar.dev/options/quasar-language-packs) [App Internationalization](https://quasar.dev/options/app-internationalization) [RTL Support](https://quasar.dev/options/rtl-support) [Installing Icon Libraries](https://quasar.dev/options/installing-icon-libraries) [Quasar Icon Sets](https://quasar.dev/options/quasar-icon-sets) [Platform Detection](https://quasar.dev/options/platform-detection) [Screen Plugin](https://quasar.dev/options/screen-plugin) [Animations](https://quasar.dev/options/animations) [Transitions](https://quasar.dev/options/transitions) + +_style_ + +Style & Identity + +[Typography](https://quasar.dev/style/typography) [Color Palette](https://quasar.dev/style/color-palette) [Theme Builder](https://quasar.dev/style/theme-builder) [Dark Mode](https://quasar.dev/style/dark-mode) [Spacing](https://quasar.dev/style/spacing) [Shadows](https://quasar.dev/style/shadows) [Breakpoints](https://quasar.dev/style/breakpoints) [Body classes](https://quasar.dev/style/body-classes) [Visibility](https://quasar.dev/style/visibility) [Positioning](https://quasar.dev/style/positioning) [Sass/SCSS Variables](https://quasar.dev/style/sass-scss-variables) [Other Helper Classes](https://quasar.dev/style/other-helper-classes) + +_view\_quilt_ + +Layout and Grid + +Flex Grid + +[Introduction to Flexbox](https://quasar.dev/layout/grid/introduction-to-flexbox) [Grid Row](https://quasar.dev/layout/grid/row) [Grid Column](https://quasar.dev/layout/grid/column) [Grid Gutter](https://quasar.dev/layout/grid/gutter) [Flexbox patterns](https://quasar.dev/layout/grid/flexbox-patterns) [Flex Playground](https://quasar.dev/layout/grid/flex-playground) + +[Layout](https://quasar.dev/layout/layout) [Routing with Layouts and Pages](https://quasar.dev/layout/routing-with-layouts-and-pages) [Layout Header and Footer](https://quasar.dev/layout/header-and-footer) [Layout Drawer](https://quasar.dev/layout/drawer) [Layout Page](https://quasar.dev/layout/page) [Layout Builder](https://quasar.dev/layout-builder) [Layout Gallery](https://quasar.dev/layout/gallery) [Page Sticky](https://quasar.dev/layout/page-sticky) [Page Scroller](https://quasar.dev/layout/page-scroller) + +_widgets_ + +Vue Components + +[Ajax Bar](https://quasar.dev/vue-components/ajax-bar) [Avatar](https://quasar.dev/vue-components/avatar) [Badge](https://quasar.dev/vue-components/badge) [Banner](https://quasar.dev/vue-components/banner) [Bar](https://quasar.dev/vue-components/bar) [Breadcrumbs](https://quasar.dev/vue-components/breadcrumbs) + +Buttons + +[Button](https://quasar.dev/vue-components/button) [Button Group](https://quasar.dev/vue-components/button-group) [Button Dropdown](https://quasar.dev/vue-components/button-dropdown) + +[Card](https://quasar.dev/vue-components/card) [Carousel](https://quasar.dev/vue-components/carousel) [Chat Message](https://quasar.dev/vue-components/chat) [Chip](https://quasar.dev/vue-components/chip) [Circular Progress](https://quasar.dev/vue-components/circular-progress) [Color Picker](https://quasar.dev/vue-components/color-picker) [Dialog](https://quasar.dev/vue-components/dialog) [Editor - WYSIWYG](https://quasar.dev/vue-components/editor) [Expansion Item](https://quasar.dev/vue-components/expansion-item) [Floating Action Button](https://quasar.dev/vue-components/floating-action-button) + +Form Components + +[Input Textfield](https://quasar.dev/vue-components/input) [Select](https://quasar.dev/vue-components/select) [File picker](https://quasar.dev/vue-components/file) [Form](https://quasar.dev/vue-components/form) [Field (wrapper)](https://quasar.dev/vue-components/field) [Radio](https://quasar.dev/vue-components/radio) [Checkbox](https://quasar.dev/vue-components/checkbox) [Toggle](https://quasar.dev/vue-components/toggle) [Button Toggle](https://quasar.dev/vue-components/button-toggle) [Option Group](https://quasar.dev/vue-components/option-group) [Slider](https://quasar.dev/vue-components/slider) [Range](https://quasar.dev/vue-components/range) [Time Picker](https://quasar.dev/vue-components/time) [Date Picker](https://quasar.dev/vue-components/date) + +[Icon](https://quasar.dev/vue-components/icon) [Img](https://quasar.dev/vue-components/img) [Infinite Scroll](https://quasar.dev/vue-components/infinite-scroll) [Inner Loading](https://quasar.dev/vue-components/inner-loading) [Intersection](https://quasar.dev/vue-components/intersection) [Knob](https://quasar.dev/vue-components/knob) [Linear Progress](https://quasar.dev/vue-components/linear-progress) [List & List Items](https://quasar.dev/vue-components/list-and-list-items) [Markup Table](https://quasar.dev/vue-components/markup-table) [Menu](https://quasar.dev/vue-components/menu) [No SSR](https://quasar.dev/vue-components/no-ssr) + +Observers + +[Resize Observer (for Element)](https://quasar.dev/vue-components/resize-observer) [Scroll Observer](https://quasar.dev/vue-components/scroll-observer) + +[Pagination](https://quasar.dev/vue-components/pagination) [Parallax](https://quasar.dev/vue-components/parallax) [Popup Edit](https://quasar.dev/vue-components/popup-edit) [Popup Proxy](https://quasar.dev/vue-components/popup-proxy) [Pull to refresh](https://quasar.dev/vue-components/pull-to-refresh) [Rating](https://quasar.dev/vue-components/rating) [Responsive](https://quasar.dev/vue-components/responsive) [Scroll Area](https://quasar.dev/vue-components/scroll-area) [Separator](https://quasar.dev/vue-components/separator) [Skeleton](https://quasar.dev/vue-components/skeleton) [Slide Item](https://quasar.dev/vue-components/slide-item) [Slide Transition](https://quasar.dev/vue-components/slide-transition) [Space](https://quasar.dev/vue-components/space) [Spinners](https://quasar.dev/vue-components/spinners) [Splitter](https://quasar.dev/vue-components/splitter) [Stepper](https://quasar.dev/vue-components/stepper) [Table](https://quasar.dev/vue-components/table) [Tabs](https://quasar.dev/vue-components/tabs) [Tab Panels](https://quasar.dev/vue-components/tab-panels) [Timeline](https://quasar.dev/vue-components/timeline) [Toolbar](https://quasar.dev/vue-components/toolbar) [Tooltip](https://quasar.dev/vue-components/tooltip) [Tree](https://quasar.dev/vue-components/tree) [Uploader](https://quasar.dev/vue-components/uploader) [Video](https://quasar.dev/vue-components/video) [Virtual Scroll](https://quasar.dev/vue-components/virtual-scroll) + +_swap\_calls_ + +Vue Directives + +[Close Popup](https://quasar.dev/vue-directives/close-popup) [Intersection](https://quasar.dev/vue-directives/intersection) [Material Ripples](https://quasar.dev/vue-directives/material-ripples) [Mutation](https://quasar.dev/vue-directives/mutation) [Morph](https://quasar.dev/vue-directives/morph) [Scroll](https://quasar.dev/vue-directives/scroll) [Scroll Fire](https://quasar.dev/vue-directives/scroll-fire) [Touch Hold](https://quasar.dev/vue-directives/touch-hold) [Touch Pan](https://quasar.dev/vue-directives/touch-pan) [Touch Repeat](https://quasar.dev/vue-directives/touch-repeat) [Touch Swipe](https://quasar.dev/vue-directives/touch-swipe) + +_extension_ + +Quasar Plugins + +[Addressbar Color](https://quasar.dev/quasar-plugins/addressbar-color) [App Fullscreen](https://quasar.dev/quasar-plugins/app-fullscreen) [App Visibility](https://quasar.dev/quasar-plugins/app-visibility) [Bottom Sheet](https://quasar.dev/quasar-plugins/bottom-sheet) [Cookies](https://quasar.dev/quasar-plugins/cookies) [Dark](https://quasar.dev/quasar-plugins/dark) [Dialog](https://quasar.dev/quasar-plugins/dialog) [Loading](https://quasar.dev/quasar-plugins/loading) [Loading Bar](https://quasar.dev/quasar-plugins/loading-bar) [Local/Session Storage](https://quasar.dev/quasar-plugins/web-storage) [Meta](https://quasar.dev/quasar-plugins/meta) [Notify](https://quasar.dev/quasar-plugins/notify) + +_developer\_mode_ + +Vue Composables + +[useQuasar](https://quasar.dev/vue-composables/use-quasar) [useDialogPluginComponent](https://quasar.dev/vue-composables/use-dialog-plugin-component) [useFormChild](https://quasar.dev/vue-composables/use-form-child) [useMeta](https://quasar.dev/vue-composables/use-meta) [useHydration\\ +\\ +new](https://quasar.dev/vue-composables/use-hydration) [useId\\ +\\ +new](https://quasar.dev/vue-composables/use-id) [useInterval\\ +\\ +new](https://quasar.dev/vue-composables/use-interval) [useRenderCache\\ +\\ +new](https://quasar.dev/vue-composables/use-render-cache) [useTick\\ +\\ +new](https://quasar.dev/vue-composables/use-tick) [useTimeout\\ +\\ +new](https://quasar.dev/vue-composables/use-timeout) [useSplitAttrs\\ +\\ +new](https://quasar.dev/vue-composables/use-split-attrs) + +_security_ + +Security + +[DO's and DON'Ts](https://quasar.dev/security/dos-and-donts) [Report a vulnerability](https://quasar.dev/security/report-a-vulnerability) + +_build_ + +Quasar CLI (with Vite) + +[Upgrade guide\\ +\\ +NEW!](https://quasar.dev/quasar-cli-vite/upgrade-guide) [The quasar.config file](https://quasar.dev/quasar-cli-vite/quasar-config-file) [Convert project to CLI with Vite](https://quasar.dev/quasar-cli-vite/convert-to-quasar-cli-with-vite) [Browser Compatibility](https://quasar.dev/quasar-cli-vite/browser-compatibility) [Supporting TypeScript](https://quasar.dev/quasar-cli-vite/supporting-ts) [Directory Structure](https://quasar.dev/quasar-cli-vite/directory-structure) [Commands List](https://quasar.dev/quasar-cli-vite/commands-list) [CSS Preprocessors](https://quasar.dev/quasar-cli-vite/css-preprocessors) [Routing](https://quasar.dev/quasar-cli-vite/routing) [Lazy Loading - Code Splitting](https://quasar.dev/quasar-cli-vite/lazy-loading) [Handling Assets](https://quasar.dev/quasar-cli-vite/handling-assets) [Boot Files](https://quasar.dev/quasar-cli-vite/boot-files) [Prefetch Feature](https://quasar.dev/quasar-cli-vite/prefetch-feature) [API Proxying](https://quasar.dev/quasar-cli-vite/api-proxying) [Handling Vite](https://quasar.dev/quasar-cli-vite/handling-vite) [Handling process.env](https://quasar.dev/quasar-cli-vite/handling-process-env) [State Management with Pinia](https://quasar.dev/quasar-cli-vite/state-management-with-pinia) [Linter](https://quasar.dev/quasar-cli-vite/linter) [Testing & Auditing](https://quasar.dev/quasar-cli-vite/testing-and-auditing) + +SPA mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-spa/introduction) [App Icons for SPA](https://quasar.dev/quasar-cli-vite/developing-spa/app-icons-spa) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-spa/build-commands) [Deploying](https://quasar.dev/quasar-cli-vite/developing-spa/deploying) + +SSR mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-ssr/introduction) [Writing Universal Code](https://quasar.dev/quasar-cli-vite/developing-ssr/writing-universal-code) [Preparation](https://quasar.dev/quasar-cli-vite/developing-ssr/preparation) [Configuring SSR](https://quasar.dev/quasar-cli-vite/developing-ssr/configuring-ssr) [ssrContext](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-context) [SSR Middleware](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-middleware) [SSR Webserver](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-webserver) [Vue SSR Directives](https://quasar.dev/quasar-cli-vite/developing-ssr/vue-ssr-directives) [App Icons for SSR](https://quasar.dev/quasar-cli-vite/developing-ssr/app-icons-ssr) [SEO for SSR](https://quasar.dev/quasar-cli-vite/developing-ssr/seo-for-ssr) [Client Side Hydration](https://quasar.dev/quasar-cli-vite/developing-ssr/client-side-hydration) [Handling 404 and 500 Errors](https://quasar.dev/quasar-cli-vite/developing-ssr/handling-404-and-500-errors) [SSR with PWA](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-with-pwa) [SSR FAQ](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-frequently-asked-questions) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-ssr/build-commands) [SSR with Typescript](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-with-typescript) [Deploying](https://quasar.dev/quasar-cli-vite/developing-ssr/deploying) + +PWA mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-pwa/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-pwa/preparation) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-pwa/build-commands) [Configuring PWA](https://quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa) [HMR for PWA](https://quasar.dev/quasar-cli-vite/developing-pwa/hmr-for-dev) [App Icons for PWA](https://quasar.dev/quasar-cli-vite/developing-pwa/app-icons-pwa) [Handling Service Worker](https://quasar.dev/quasar-cli-vite/developing-pwa/handling-service-worker) [PWA with Typescript](https://quasar.dev/quasar-cli-vite/developing-pwa/pwa-with-typescript) + +[Developing Mobile Apps](https://quasar.dev/quasar-cli-vite/developing-mobile-apps) + +Capacitor mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/preparation) [Capacitor versions](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/capacitor-version-support) [Configuring Capacitor](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/configuring-capacitor) [App Icons for Capacitor](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/app-icons-capacitor) [Capacitor API](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/capacitor-api) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/publishing-to-store) + +Cordova mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/preparation) [Configuring Cordova](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/configuring-cordova) [App Icons for Cordova](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/app-icons-cordova) [Cordova Plugins](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/cordova-plugins) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/publishing-to-store) + +Electron mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-electron-apps/introduction) [Upgrade guide](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-upgrade-guide) [Preparation](https://quasar.dev/quasar-cli-vite/developing-electron-apps/preparation) [Configuring Electron](https://quasar.dev/quasar-cli-vite/developing-electron-apps/configuring-electron) [App Icons for Electron](https://quasar.dev/quasar-cli-vite/developing-electron-apps/app-icons-electron) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-electron-apps/build-commands) [Preload Script](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-preload-script) [Electron Packages](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-packages) [Accessing files](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-accessing-files) [Frameless Electron Window](https://quasar.dev/quasar-cli-vite/developing-electron-apps/frameless-electron-window) [Electron with Typescript](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-with-typescript) [Electron Security Concerns](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-security-concerns) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-vite/developing-electron-apps/troubleshooting-and-tips) + +Browser Extensions mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/preparation) [Configuring BEX](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex) [App Icons for BEX](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/app-icons-browser-extension) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/build-commands) [Types of BEX](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/types-of-bex) [BEX Bridge Communication](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/bex-bridge) [Background Script](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/background-script) [Content Scripts](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/content-scripts) + +[Ajax Requests](https://quasar.dev/quasar-cli-vite/ajax-requests) [Opening Dev Server To Public](https://quasar.dev/quasar-cli-vite/opening-dev-server-to-public) + +_build_ + +Quasar CLI (with Webpack) + +[Upgrade guide\\ +\\ +NEW!](https://quasar.dev/quasar-cli-webpack/upgrade-guide) [The quasar.config file](https://quasar.dev/quasar-cli-webpack/quasar-config-file) [Convert to CLI with Webpack](https://quasar.dev/quasar-cli-webpack/convert-to-quasar-cli-with-webpack) [Browser Compatibility](https://quasar.dev/quasar-cli-webpack/browser-compatibility) [Supporting TypeScript](https://quasar.dev/quasar-cli-webpack/supporting-ts) [Directory Structure](https://quasar.dev/quasar-cli-webpack/directory-structure) [Commands List](https://quasar.dev/quasar-cli-webpack/commands-list) [CSS Preprocessors](https://quasar.dev/quasar-cli-webpack/css-preprocessors) [Routing](https://quasar.dev/quasar-cli-webpack/routing) [Lazy Loading - Code Splitting](https://quasar.dev/quasar-cli-webpack/lazy-loading) [Handling Assets](https://quasar.dev/quasar-cli-webpack/handling-assets) [Boot Files](https://quasar.dev/quasar-cli-webpack/boot-files) [Prefetch Feature](https://quasar.dev/quasar-cli-webpack/prefetch-feature) [API Proxying](https://quasar.dev/quasar-cli-webpack/api-proxying) [Handling Webpack](https://quasar.dev/quasar-cli-webpack/handling-webpack) [Handling process.env](https://quasar.dev/quasar-cli-webpack/handling-process-env) [State Management with Pinia](https://quasar.dev/quasar-cli-webpack/state-management-with-pinia) [Linter](https://quasar.dev/quasar-cli-webpack/linter) [Testing & Auditing](https://quasar.dev/quasar-cli-webpack/testing-and-auditing) + +SPA mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-spa/introduction) [App Icons for SPA](https://quasar.dev/quasar-cli-webpack/developing-spa/app-icons-spa) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-spa/build-commands) [Deploying](https://quasar.dev/quasar-cli-webpack/developing-spa/deploying) + +SSR mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-ssr/introduction) [Writing Universal Code](https://quasar.dev/quasar-cli-webpack/developing-ssr/writing-universal-code) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-ssr/preparation) [Configuring SSR](https://quasar.dev/quasar-cli-webpack/developing-ssr/configuring-ssr) [ssrContext](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-context) [SSR Middleware](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-middleware) [SSR Webserver](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-webserver) [Vue SSR Directives](https://quasar.dev/quasar-cli-webpack/developing-ssr/vue-ssr-directives) [App Icons for SSR](https://quasar.dev/quasar-cli-webpack/developing-ssr/app-icons-ssr) [SEO for SSR](https://quasar.dev/quasar-cli-webpack/developing-ssr/seo-for-ssr) [Client Side Hydration](https://quasar.dev/quasar-cli-webpack/developing-ssr/client-side-hydration) [Handling 404 and 500 Errors](https://quasar.dev/quasar-cli-webpack/developing-ssr/handling-404-and-500-errors) [SSR with PWA](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-with-pwa) [SSR FAQ](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-frequently-asked-questions) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-ssr/build-commands) [SSR with Typescript](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-with-typescript) [Deploying](https://quasar.dev/quasar-cli-webpack/developing-ssr/deploying) + +PWA mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-pwa/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-pwa/preparation) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-pwa/build-commands) [Configuring PWA](https://quasar.dev/quasar-cli-webpack/developing-pwa/configuring-pwa) [HMR for PWA](https://quasar.dev/quasar-cli-webpack/developing-pwa/hmr-for-dev) [App Icons for PWA](https://quasar.dev/quasar-cli-webpack/developing-pwa/app-icons-pwa) [Handling Service Worker](https://quasar.dev/quasar-cli-webpack/developing-pwa/handling-service-worker) [PWA with Typescript](https://quasar.dev/quasar-cli-webpack/developing-pwa/pwa-with-typescript) + +[Developing Mobile Apps](https://quasar.dev/quasar-cli-webpack/developing-mobile-apps) + +Capacitor mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/preparation) [Capacitor versions](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/capacitor-version-support) [Configuring Capacitor](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/configuring-capacitor) [App Icons for Capacitor](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/app-icons-capacitor) [Capacitor API](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/capacitor-api) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/publishing-to-store) + +Cordova mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/preparation) [Configuring Cordova](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/configuring-cordova) [App Icons for Cordova](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/app-icons-cordova) [Cordova Plugins](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/cordova-plugins) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/publishing-to-store) + +Electron mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/introduction) [Upgrade guide](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-upgrade-guide) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/preparation) [Configuring Electron](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/configuring-electron) [App Icons for Electron](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/app-icons-electron) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/build-commands) [Preload Script](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-preload-script) [Electron Packages](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-packages) [Accessing files](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-accessing-files) [Frameless Electron Window](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/frameless-electron-window) [Electron with Typescript](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-with-typescript) [Electron Security Concerns](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-security-concerns) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/troubleshooting-and-tips) + +Browser Extensions mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/preparation) [Configuring BEX](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/configuring-bex) [App Icons for BEX](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/app-icons-browser-extension) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/build-commands) [Types of BEX](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/types-of-bex) [BEX Bridge Communication](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/bex-bridge) [Background Script](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/background-script) [Content Scripts](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/content-scripts) + +[Ajax Requests](https://quasar.dev/quasar-cli-webpack/ajax-requests) [Opening Dev Server To Public](https://quasar.dev/quasar-cli-webpack/opening-dev-server-to-public) + +_stars_ + +Icon Genie CLI + +[Introduction](https://quasar.dev/icongenie/introduction) [Installation / Upgrade notes](https://quasar.dev/icongenie/installation) [Command list](https://quasar.dev/icongenie/command-list) [App Icons List](https://quasar.dev/icongenie/app-icons-list) [Profile files](https://quasar.dev/icongenie/profile-files) + +_note\_add_ + +App Extensions + +[Introduction](https://quasar.dev/app-extensions/introduction) [Discover App Extensions](https://quasar.dev/app-extensions/discover) + +Development Guide + +[Introduction](https://quasar.dev/app-extensions/development-guide/introduction) [Prompts API](https://quasar.dev/app-extensions/development-guide/prompts-api) [Install API](https://quasar.dev/app-extensions/development-guide/install-api) [Index API](https://quasar.dev/app-extensions/development-guide/index-api) [Uninstall API](https://quasar.dev/app-extensions/development-guide/uninstall-api) + +Tips and Tricks + +[Introduction](https://quasar.dev/app-extensions/tips-and-tricks/introduction) [Provide a UI component](https://quasar.dev/app-extensions/tips-and-tricks/provide-a-ui-component) [Provide a directive](https://quasar.dev/app-extensions/tips-and-tricks/provide-a-directive) [Inject Quasar Plugin](https://quasar.dev/app-extensions/tips-and-tricks/inject-quasar-plugin) [Starter kit equivalent](https://quasar.dev/app-extensions/tips-and-tricks/starter-kit-equivalent) [Chain Webpack](https://quasar.dev/app-extensions/tips-and-tricks/chain-webpack) + +_healing_ + +Quasar Utils + +[Date Utils](https://quasar.dev/quasar-utils/date-utils) [Color Utils](https://quasar.dev/quasar-utils/color-utils) [DOM Utils](https://quasar.dev/quasar-utils/dom-utils) [Morph Utils](https://quasar.dev/quasar-utils/morph-utils) [Formatter Utils](https://quasar.dev/quasar-utils/formatter-utils) [Scrolling Utils](https://quasar.dev/quasar-utils/scrolling-utils) [Type Checking Utils](https://quasar.dev/quasar-utils/type-checking-utils) [EventBus Util](https://quasar.dev/quasar-utils/event-bus-util) [Other Utils](https://quasar.dev/quasar-utils/other-utils) + +_search_ + +Buttons + +Inputs + +Loading + +Media + +Navigation + +Panels & Popups + +Scroll + +Tables + +Other Components + +Directives + +Plugins + +Utils + +[![](https://cdn.quasar.dev/img/components/ajax-bar.jpg)\\ +\\ +Ajax-bar\\ +\\ +A loading bar for ajax calls in progress](https://quasar.dev/vue-components/ajax-bar) [![](https://cdn.quasar.dev/img/components/avatar.jpg)\\ +\\ +Avatar\\ +\\ +A space for your portrait, icon or text](https://quasar.dev/vue-components/avatar) [![](https://cdn.quasar.dev/img/components/badge.jpg)\\ +\\ +Badge\\ +\\ +To highlight small but important info](https://quasar.dev/vue-components/badge) [![](https://cdn.quasar.dev/img/components/banner.jpg)\\ +\\ +Banner\\ +\\ +To display important messages and actions](https://quasar.dev/vue-components/banner) [![](https://cdn.quasar.dev/img/components/bar.jpg)\\ +\\ +Bar\\ +\\ +A small top bar for side info and actions](https://quasar.dev/vue-components/bar) [![](https://cdn.quasar.dev/img/components/breadcrumbs.jpg)\\ +\\ +Breadcrumbs\\ +\\ +To keep track of your position inside app](https://quasar.dev/vue-components/breadcrumbs) [![](https://cdn.quasar.dev/img/components/buttons.jpg)\\ +\\ +Buttons\\ +\\ +To access the most important actions](https://quasar.dev/vue-components/button) [![](https://cdn.quasar.dev/img/components/buttons-dropdown.jpg)\\ +\\ +Buttons Dropdown\\ +\\ +To access more actions at once in less space](https://quasar.dev/vue-components/button-dropdown) [![](https://cdn.quasar.dev/img/components/buttons-group.jpg)\\ +\\ +Buttons Group\\ +\\ +An alternative to classic buttons](https://quasar.dev/vue-components/button-group) [![](https://cdn.quasar.dev/img/components/cards.jpg)\\ +\\ +Cards\\ +\\ +To display grouped contents](https://quasar.dev/vue-components/card) [![](https://cdn.quasar.dev/img/components/carousels.jpg)\\ +\\ +Carousels\\ +\\ +To display images and other contents](https://quasar.dev/vue-components/carousel) [![](https://cdn.quasar.dev/img/components/chat-message.jpg)\\ +\\ +Chat Message\\ +\\ +To display users' conversations](https://quasar.dev/vue-components/chat) [![](https://cdn.quasar.dev/img/components/checkbox.jpg)\\ +\\ +Checkbox\\ +\\ +To flag one or more options in a list](https://quasar.dev/vue-components/checkbox) [![](https://cdn.quasar.dev/img/components/chips.jpg)\\ +\\ +Chips\\ +\\ +A small container for info and actions](https://quasar.dev/vue-components/chip) [![](https://cdn.quasar.dev/img/components/circular-progress.jpg)\\ +\\ +Circular Progress\\ +\\ +To inform when content is still loading](https://quasar.dev/vue-components/circular-progress) [![](https://cdn.quasar.dev/img/components/color-pickers.jpg)\\ +\\ +Color Pickers\\ +\\ +To select color values and codes](https://quasar.dev/vue-components/color-picker) [![](https://cdn.quasar.dev/img/components/date-picker.jpg)\\ +\\ +Date Picker\\ +\\ +To access the most important actions](https://quasar.dev/vue-components/date) [![](https://cdn.quasar.dev/img/components/dialogs.jpg)\\ +\\ +Dialogs\\ +\\ +To show actions and info only when needed](https://quasar.dev/vue-components/dialog) [![](https://cdn.quasar.dev/img/components/editor-wysiwyg.jpg)\\ +\\ +Editor WYSIWYG\\ +\\ +To write text and style it directly](https://quasar.dev/vue-components/editor) [![](https://cdn.quasar.dev/img/components/expansion-panels.jpg)\\ +\\ +Expansion Panels\\ +\\ +To show hidden extra info and actions](https://quasar.dev/vue-components/expansion-item) [![](https://cdn.quasar.dev/img/components/file-pickers.jpg)\\ +\\ +File Pickers\\ +\\ +To access and choose a file from users' device](https://quasar.dev/vue-components/file) [![](https://cdn.quasar.dev/img/components/floating-action-button.jpg)\\ +\\ +Floating Action Button\\ +\\ +To display the page primary action](https://quasar.dev/vue-components/floating-action-button) [![](https://cdn.quasar.dev/img/components/forms.jpg)\\ +\\ +Forms\\ +\\ +A system to submit validated inputs](https://quasar.dev/vue-components/form) [![](https://cdn.quasar.dev/img/components/form-fields.jpg)\\ +\\ +Form Fields\\ +\\ +Wrapper for your own custom form elements](https://quasar.dev/vue-components/field) [![](https://cdn.quasar.dev/img/components/icon.jpg)\\ +\\ +Icon\\ +\\ +To insert icons inside other components](https://quasar.dev/vue-components/icon) [![](https://cdn.quasar.dev/img/components/img.jpg)\\ +\\ +Img\\ +\\ +To set some basic image features](https://quasar.dev/vue-components/img) [![](https://cdn.quasar.dev/img/components/infinite-scroll.jpg)\\ +\\ +Infinite Scroll\\ +\\ +To enable new content display while scrolling](https://quasar.dev/vue-components/infinite-scroll) [![](https://cdn.quasar.dev/img/components/inner-loading.jpg)\\ +\\ +Inner Loading\\ +\\ +To add content loading inside a component](https://quasar.dev/vue-components/inner-loading) [![](https://cdn.quasar.dev/img/components/input-text-fields.jpg)\\ +\\ +Input Text Fields\\ +\\ +To collect users' typed text input](https://quasar.dev/vue-components/input) [![](https://cdn.quasar.dev/img/components/intersection.jpg)\\ +\\ +Intersection\\ +\\ +Set how UI elements enter the screen](https://quasar.dev/vue-components/intersection) [![](https://cdn.quasar.dev/img/components/knob.jpg)\\ +\\ +Knob\\ +\\ +To set a value with a draggable gauge](https://quasar.dev/vue-components/knob) [![](https://cdn.quasar.dev/img/components/linear-progress.jpg)\\ +\\ +Linear Progress\\ +\\ +A loading bar with various behaviors](https://quasar.dev/vue-components/linear-progress) [![](https://cdn.quasar.dev/img/components/list-and-list-items.jpg)\\ +\\ +List and List Items\\ +\\ +To display contents on a vertical list](https://quasar.dev/vue-components/list-and-list-items) [![](https://cdn.quasar.dev/img/components/markup-table.jpg)\\ +\\ +Markup Table\\ +\\ +To display data and content on a table](https://quasar.dev/vue-components/markup-table) [![](https://cdn.quasar.dev/img/components/menu.jpg)\\ +\\ +Menu\\ +\\ +A dropdown panel to access options](https://quasar.dev/vue-components/menu) [![](https://cdn.quasar.dev/img/components/no-ssr.jpg)\\ +\\ +No SSR\\ +\\ +Ignore irrelevant code during SSR generation](https://quasar.dev/vue-components/no-ssr) [![](https://cdn.quasar.dev/img/components/observer-resize.jpg)\\ +\\ +Observer resize\\ +\\ +Emit an Event when an element resizes](https://quasar.dev/vue-components/resize-observer) [![](https://cdn.quasar.dev/img/components/observer-scroll.jpg)\\ +\\ +Observer scroll\\ +\\ +Emit an Event when the user scrolls](https://quasar.dev/vue-components/scroll-observer) [![](https://cdn.quasar.dev/img/components/option-group.jpg)\\ +\\ +Option Group\\ +\\ +Helper component to set groups of options](https://quasar.dev/vue-components/option-group) [![](https://cdn.quasar.dev/img/components/pagination.jpg)\\ +\\ +Pagination\\ +\\ +To navigate content on multiple pages](https://quasar.dev/vue-components/pagination) [![](https://cdn.quasar.dev/img/components/parallax.jpg)\\ +\\ +Parallax\\ +\\ +To create interesting UI image background](https://quasar.dev/vue-components/parallax) [![](https://cdn.quasar.dev/img/components/popup-edit.jpg)\\ +\\ +Popup Edit\\ +\\ +To access inline editing of data](https://quasar.dev/vue-components/popup-edit) [![](https://cdn.quasar.dev/img/components/popup-proxy.jpg)\\ +\\ +Popup Proxy\\ +\\ +To show extra content on click](https://quasar.dev/vue-components/popup-proxy) [![](https://cdn.quasar.dev/img/components/pull-to-refresh.jpg)\\ +\\ +Pull to Refresh\\ +\\ +To refresh the page content with a gesture](https://quasar.dev/vue-components/pull-to-refresh) [![](https://cdn.quasar.dev/img/components/radio.jpg)\\ +\\ +Radio\\ +\\ +To select a single option in a list](https://quasar.dev/vue-components/radio) [![](https://cdn.quasar.dev/img/components/range.jpg)\\ +\\ +Range\\ +\\ +To pick a period on a range of values](https://quasar.dev/vue-components/range) [![](https://cdn.quasar.dev/img/components/rating.jpg)\\ +\\ +Rating\\ +\\ +The classic "star rating" component](https://quasar.dev/vue-components/rating) [![](https://cdn.quasar.dev/img/components/responsive.jpg)\\ +\\ +Responsive\\ +\\ +To keep content aspect ratio consistent](https://quasar.dev/vue-components/responsive) [![](https://cdn.quasar.dev/img/components/scroll-area.jpg)\\ +\\ +Scroll Area\\ +\\ +To set a scrollable content in components](https://quasar.dev/vue-components/scroll-area) [![](https://cdn.quasar.dev/img/components/select.jpg)\\ +\\ +Select\\ +\\ +To choose one item from a dropdown list](https://quasar.dev/vue-components/select) [![](https://cdn.quasar.dev/img/components/separator.jpg)\\ +\\ +Separator\\ +\\ +The linear visual divider for contents](https://quasar.dev/vue-components/separator) [![](https://cdn.quasar.dev/img/components/skeleton.jpg)\\ +\\ +Skeleton\\ +\\ +To set loading content placeholders](https://quasar.dev/vue-components/skeleton) [![](https://cdn.quasar.dev/img/components/slide-item.jpg)\\ +\\ +Slide Item\\ +\\ +To add dragging feature to list items](https://quasar.dev/vue-components/slide-item) [![](https://cdn.quasar.dev/img/components/slider.jpg)\\ +\\ +Slider\\ +\\ +To pick a single value on a range](https://quasar.dev/vue-components/slider) [![](https://cdn.quasar.dev/img/components/slide-transition.jpg)\\ +\\ +Slide Transition\\ +\\ +To show a hidden content](https://quasar.dev/vue-components/slide-transition) [![](https://cdn.quasar.dev/img/components/space.jpg)\\ +\\ +Space\\ +\\ +Fill space inside elements using flexbox](https://quasar.dev/vue-components/space) [![](https://cdn.quasar.dev/img/components/spinners.jpg)\\ +\\ +Spinners\\ +\\ +A loading indicator with various behaviors](https://quasar.dev/vue-components/spinners) [![](https://cdn.quasar.dev/img/components/splitter.jpg)\\ +\\ +Splitter\\ +\\ +To add a draggable resizer for containers](https://quasar.dev/vue-components/splitter) [![](https://cdn.quasar.dev/img/components/stepper.jpg)\\ +\\ +Stepper\\ +\\ +To divide content in progressive steps](https://quasar.dev/vue-components/stepper) [![](https://cdn.quasar.dev/img/components/table.jpg)\\ +\\ +Table\\ +\\ +To display much data on a datatable](https://quasar.dev/vue-components/table) [![](https://cdn.quasar.dev/img/components/tab-panels.jpg)\\ +\\ +Tab Panels\\ +\\ +To split out content view in the same page](https://quasar.dev/vue-components/tab-panels) [![](https://cdn.quasar.dev/img/components/tabs.jpg)\\ +\\ +Tabs\\ +\\ +To navigate separate content in one page](https://quasar.dev/vue-components/tabs) [![](https://cdn.quasar.dev/img/components/timeline.jpg)\\ +\\ +Timeline\\ +\\ +A vertical solution to set milestones in time](https://quasar.dev/vue-components/timeline) [![](https://cdn.quasar.dev/img/components/time-picker.jpg)\\ +\\ +Time Picker\\ +\\ +To set a specific time on the clock](https://quasar.dev/vue-components/time) [![](https://cdn.quasar.dev/img/components/toggle-buttons.jpg)\\ +\\ +Toggle Buttons\\ +\\ +An alternative to pick an option among many](https://quasar.dev/vue-components/button-toggle) [![](https://cdn.quasar.dev/img/components/toggle.jpg)\\ +\\ +Toggle\\ +\\ +To switch an option on and off](https://quasar.dev/vue-components/toggle) [![](https://cdn.quasar.dev/img/components/toolbar.jpg)\\ +\\ +Toolbar\\ +\\ +The top main bar for actions and menu](https://quasar.dev/vue-components/toolbar) [![](https://cdn.quasar.dev/img/components/tooltip.jpg)\\ +\\ +Tooltip\\ +\\ +To show extra useful info about the UI](https://quasar.dev/vue-components/tooltip) [![](https://cdn.quasar.dev/img/components/tree.jpg)\\ +\\ +Tree\\ +\\ +An indented structure for hierarchical data](https://quasar.dev/vue-components/tree) [![](https://cdn.quasar.dev/img/components/uploader.jpg)\\ +\\ +Uploader\\ +\\ +To upload any kind of file from the computer](https://quasar.dev/vue-components/uploader) [![](https://cdn.quasar.dev/img/components/video.jpg)\\ +\\ +Video\\ +\\ +To embed and display a video player in UI](https://quasar.dev/vue-components/video) [![](https://cdn.quasar.dev/img/components/virtual-scroll.jpg)\\ +\\ +Virtual Scroll\\ +\\ +To render new content while scrolling it](https://quasar.dev/vue-components/virtual-scroll) [Intersection\\ +\\ +Handle elements coming into the view](https://quasar.dev/vue-directives/intersection) [Material Ripples\\ +\\ +Apply Material ripples to elements](https://quasar.dev/vue-directives/material-ripples) [Mutation\\ +\\ +Watch changes being made to the DOM tree](https://quasar.dev/vue-directives/mutation) [Morph\\ +\\ +Morph DOM elements between two states](https://quasar.dev/vue-directives/morph) [Scroll\\ +\\ +Handle page scroll](https://quasar.dev/vue-directives/scroll) [Scroll Fire\\ +\\ +Take action when element comes into view](https://quasar.dev/vue-directives/scroll-fire) [Touch Hold\\ +\\ +Handle touch & mouse hold user actions](https://quasar.dev/vue-directives/touch-hold) [Touch Pan\\ +\\ +Handle touch & mouse panning user actions](https://quasar.dev/vue-directives/touch-pan) [Touch Repeat\\ +\\ +Handle repeated touch & mouse taps/clicks](https://quasar.dev/vue-directives/touch-repeat) [Touch Swipe\\ +\\ +Handle touch & mouse swipe user actions](https://quasar.dev/vue-directives/touch-swipe) [Addressbar Color\\ +\\ +Manage the browser addressbar color](https://quasar.dev/quasar-plugins/addressbar-color) [App Fullscreen\\ +\\ +Handle app fullscreen mode](https://quasar.dev/quasar-plugins/app-fullscreen) [App Visibility\\ +\\ +For app coming into (or out of) view](https://quasar.dev/quasar-plugins/app-visibility) [Bottom Sheet\\ +\\ +Quick way to offer a list of actions](https://quasar.dev/quasar-plugins/bottom-sheet) [Cookies\\ +\\ +Easy way to manage browser cookies](https://quasar.dev/quasar-plugins/cookies) [Dark Mode\\ +\\ +Manage dark mode](https://quasar.dev/quasar-plugins/dark) [Dialog\\ +\\ +Plugin to display a floating modal](https://quasar.dev/quasar-plugins/dialog) [Loading\\ +\\ +Overlay for a background action in progress](https://quasar.dev/quasar-plugins/loading) [Loading Bar\\ +\\ +Display a loading bar for in progress Ajax calls](https://quasar.dev/quasar-plugins/loading-bar) [Local/Session Storage\\ +\\ +Manage the local storage and session storage](https://quasar.dev/quasar-plugins/web-storage) [Meta Plugin\\ +\\ +Helps with SEO by managing the meta tags](https://quasar.dev/quasar-plugins/meta) [Notify\\ +\\ +Display floating animated messages](https://quasar.dev/quasar-plugins/notify) [Date utils\\ +\\ +Easily handle date objects](https://quasar.dev/quasar-utils/date-utils) [DOM utils\\ +\\ +Various DOM-related helper utils](https://quasar.dev/quasar-utils/dom-utils) [Morph utils\\ +\\ +Morph DOM elements helper util](https://quasar.dev/quasar-utils/morph-utils) [Formatter utils\\ +\\ +Various text formatting utils](https://quasar.dev/quasar-utils/formatter-utils) [Scrolling utils\\ +\\ +Various scrolling-related utils](https://quasar.dev/quasar-utils/scrolling-utils) [Type checking utils\\ +\\ +Helpers to determine variable types](https://quasar.dev/quasar-utils/type-checking-utils) [Event bus util\\ +\\ +Global event bus](https://quasar.dev/quasar-utils/event-bus-util) [Other utils\\ +\\ +Various other utils that Quasar supplies](https://quasar.dev/quasar-utils/other-utils) + +[MIT License](https://github.com/quasarframework/quasar/blob/dev/LICENSE) [Privacy Policy](https://www.iubenda.com/privacy-policy/40685560) + +Copyright © 2015-present PULSARDEV SRL, [Razvan Stoenescu](https://github.com/rstoenescu) + +This website has been designed in collaboration with [Dreamonkey Srl](https://www.dreamonkey.com/) + +## Quasar Layout Gallery +[_assignment\_late_\\ +\\ +Why donate](https://quasar.dev/why-donate) [_travel\_explore_\\ +\\ +API Explorer](https://quasar.dev/api-explorer) + +_code_ + +How to contribute + +[Contribution Guide](https://quasar.dev/how-to-contribute/contribution-guide) [Running Projects](https://quasar.dev/how-to-contribute/running-projects) [Start a New Project](https://quasar.dev/how-to-contribute/new-project) [Project Maintainer Role](https://quasar.dev/how-to-contribute/project-maintainer) [Commit Conventions](https://quasar.dev/how-to-contribute/commit-conventions) + +_tune_ + +Options & Helpers + +[The $q object](https://quasar.dev/options/the-q-object) [App Icons](https://quasar.dev/options/app-icons) [SEO](https://quasar.dev/options/seo) [Quasar Language Packs](https://quasar.dev/options/quasar-language-packs) [App Internationalization](https://quasar.dev/options/app-internationalization) [RTL Support](https://quasar.dev/options/rtl-support) [Installing Icon Libraries](https://quasar.dev/options/installing-icon-libraries) [Quasar Icon Sets](https://quasar.dev/options/quasar-icon-sets) [Platform Detection](https://quasar.dev/options/platform-detection) [Screen Plugin](https://quasar.dev/options/screen-plugin) [Animations](https://quasar.dev/options/animations) [Transitions](https://quasar.dev/options/transitions) + +_style_ + +Style & Identity + +[Typography](https://quasar.dev/style/typography) [Color Palette](https://quasar.dev/style/color-palette) [Theme Builder](https://quasar.dev/style/theme-builder) [Dark Mode](https://quasar.dev/style/dark-mode) [Spacing](https://quasar.dev/style/spacing) [Shadows](https://quasar.dev/style/shadows) [Breakpoints](https://quasar.dev/style/breakpoints) [Body classes](https://quasar.dev/style/body-classes) [Visibility](https://quasar.dev/style/visibility) [Positioning](https://quasar.dev/style/positioning) [Sass/SCSS Variables](https://quasar.dev/style/sass-scss-variables) [Other Helper Classes](https://quasar.dev/style/other-helper-classes) + +_view\_quilt_ + +Layout and Grid + +Flex Grid + +[Introduction to Flexbox](https://quasar.dev/layout/grid/introduction-to-flexbox) [Grid Row](https://quasar.dev/layout/grid/row) [Grid Column](https://quasar.dev/layout/grid/column) [Grid Gutter](https://quasar.dev/layout/grid/gutter) [Flexbox patterns](https://quasar.dev/layout/grid/flexbox-patterns) [Flex Playground](https://quasar.dev/layout/grid/flex-playground) + +[Layout](https://quasar.dev/layout/layout) [Routing with Layouts and Pages](https://quasar.dev/layout/routing-with-layouts-and-pages) [Layout Header and Footer](https://quasar.dev/layout/header-and-footer) [Layout Drawer](https://quasar.dev/layout/drawer) [Layout Page](https://quasar.dev/layout/page) [Layout Builder](https://quasar.dev/layout-builder) [Layout Gallery](https://quasar.dev/layout/gallery) [Page Sticky](https://quasar.dev/layout/page-sticky) [Page Scroller](https://quasar.dev/layout/page-scroller) + +_widgets_ + +Vue Components + +[Ajax Bar](https://quasar.dev/vue-components/ajax-bar) [Avatar](https://quasar.dev/vue-components/avatar) [Badge](https://quasar.dev/vue-components/badge) [Banner](https://quasar.dev/vue-components/banner) [Bar](https://quasar.dev/vue-components/bar) [Breadcrumbs](https://quasar.dev/vue-components/breadcrumbs) + +Buttons + +[Button](https://quasar.dev/vue-components/button) [Button Group](https://quasar.dev/vue-components/button-group) [Button Dropdown](https://quasar.dev/vue-components/button-dropdown) + +[Card](https://quasar.dev/vue-components/card) [Carousel](https://quasar.dev/vue-components/carousel) [Chat Message](https://quasar.dev/vue-components/chat) [Chip](https://quasar.dev/vue-components/chip) [Circular Progress](https://quasar.dev/vue-components/circular-progress) [Color Picker](https://quasar.dev/vue-components/color-picker) [Dialog](https://quasar.dev/vue-components/dialog) [Editor - WYSIWYG](https://quasar.dev/vue-components/editor) [Expansion Item](https://quasar.dev/vue-components/expansion-item) [Floating Action Button](https://quasar.dev/vue-components/floating-action-button) + +Form Components + +[Input Textfield](https://quasar.dev/vue-components/input) [Select](https://quasar.dev/vue-components/select) [File picker](https://quasar.dev/vue-components/file) [Form](https://quasar.dev/vue-components/form) [Field (wrapper)](https://quasar.dev/vue-components/field) [Radio](https://quasar.dev/vue-components/radio) [Checkbox](https://quasar.dev/vue-components/checkbox) [Toggle](https://quasar.dev/vue-components/toggle) [Button Toggle](https://quasar.dev/vue-components/button-toggle) [Option Group](https://quasar.dev/vue-components/option-group) [Slider](https://quasar.dev/vue-components/slider) [Range](https://quasar.dev/vue-components/range) [Time Picker](https://quasar.dev/vue-components/time) [Date Picker](https://quasar.dev/vue-components/date) + +[Icon](https://quasar.dev/vue-components/icon) [Img](https://quasar.dev/vue-components/img) [Infinite Scroll](https://quasar.dev/vue-components/infinite-scroll) [Inner Loading](https://quasar.dev/vue-components/inner-loading) [Intersection](https://quasar.dev/vue-components/intersection) [Knob](https://quasar.dev/vue-components/knob) [Linear Progress](https://quasar.dev/vue-components/linear-progress) [List & List Items](https://quasar.dev/vue-components/list-and-list-items) [Markup Table](https://quasar.dev/vue-components/markup-table) [Menu](https://quasar.dev/vue-components/menu) [No SSR](https://quasar.dev/vue-components/no-ssr) + +Observers + +[Resize Observer (for Element)](https://quasar.dev/vue-components/resize-observer) [Scroll Observer](https://quasar.dev/vue-components/scroll-observer) + +[Pagination](https://quasar.dev/vue-components/pagination) [Parallax](https://quasar.dev/vue-components/parallax) [Popup Edit](https://quasar.dev/vue-components/popup-edit) [Popup Proxy](https://quasar.dev/vue-components/popup-proxy) [Pull to refresh](https://quasar.dev/vue-components/pull-to-refresh) [Rating](https://quasar.dev/vue-components/rating) [Responsive](https://quasar.dev/vue-components/responsive) [Scroll Area](https://quasar.dev/vue-components/scroll-area) [Separator](https://quasar.dev/vue-components/separator) [Skeleton](https://quasar.dev/vue-components/skeleton) [Slide Item](https://quasar.dev/vue-components/slide-item) [Slide Transition](https://quasar.dev/vue-components/slide-transition) [Space](https://quasar.dev/vue-components/space) [Spinners](https://quasar.dev/vue-components/spinners) [Splitter](https://quasar.dev/vue-components/splitter) [Stepper](https://quasar.dev/vue-components/stepper) [Table](https://quasar.dev/vue-components/table) [Tabs](https://quasar.dev/vue-components/tabs) [Tab Panels](https://quasar.dev/vue-components/tab-panels) [Timeline](https://quasar.dev/vue-components/timeline) [Toolbar](https://quasar.dev/vue-components/toolbar) [Tooltip](https://quasar.dev/vue-components/tooltip) [Tree](https://quasar.dev/vue-components/tree) [Uploader](https://quasar.dev/vue-components/uploader) [Video](https://quasar.dev/vue-components/video) [Virtual Scroll](https://quasar.dev/vue-components/virtual-scroll) + +_swap\_calls_ + +Vue Directives + +[Close Popup](https://quasar.dev/vue-directives/close-popup) [Intersection](https://quasar.dev/vue-directives/intersection) [Material Ripples](https://quasar.dev/vue-directives/material-ripples) [Mutation](https://quasar.dev/vue-directives/mutation) [Morph](https://quasar.dev/vue-directives/morph) [Scroll](https://quasar.dev/vue-directives/scroll) [Scroll Fire](https://quasar.dev/vue-directives/scroll-fire) [Touch Hold](https://quasar.dev/vue-directives/touch-hold) [Touch Pan](https://quasar.dev/vue-directives/touch-pan) [Touch Repeat](https://quasar.dev/vue-directives/touch-repeat) [Touch Swipe](https://quasar.dev/vue-directives/touch-swipe) + +_extension_ + +Quasar Plugins + +[Addressbar Color](https://quasar.dev/quasar-plugins/addressbar-color) [App Fullscreen](https://quasar.dev/quasar-plugins/app-fullscreen) [App Visibility](https://quasar.dev/quasar-plugins/app-visibility) [Bottom Sheet](https://quasar.dev/quasar-plugins/bottom-sheet) [Cookies](https://quasar.dev/quasar-plugins/cookies) [Dark](https://quasar.dev/quasar-plugins/dark) [Dialog](https://quasar.dev/quasar-plugins/dialog) [Loading](https://quasar.dev/quasar-plugins/loading) [Loading Bar](https://quasar.dev/quasar-plugins/loading-bar) [Local/Session Storage](https://quasar.dev/quasar-plugins/web-storage) [Meta](https://quasar.dev/quasar-plugins/meta) [Notify](https://quasar.dev/quasar-plugins/notify) + +_developer\_mode_ + +Vue Composables + +[useQuasar](https://quasar.dev/vue-composables/use-quasar) [useDialogPluginComponent](https://quasar.dev/vue-composables/use-dialog-plugin-component) [useFormChild](https://quasar.dev/vue-composables/use-form-child) [useMeta](https://quasar.dev/vue-composables/use-meta) [useHydration\\ +\\ +new](https://quasar.dev/vue-composables/use-hydration) [useId\\ +\\ +new](https://quasar.dev/vue-composables/use-id) [useInterval\\ +\\ +new](https://quasar.dev/vue-composables/use-interval) [useRenderCache\\ +\\ +new](https://quasar.dev/vue-composables/use-render-cache) [useTick\\ +\\ +new](https://quasar.dev/vue-composables/use-tick) [useTimeout\\ +\\ +new](https://quasar.dev/vue-composables/use-timeout) [useSplitAttrs\\ +\\ +new](https://quasar.dev/vue-composables/use-split-attrs) + +_security_ + +Security + +[DO's and DON'Ts](https://quasar.dev/security/dos-and-donts) [Report a vulnerability](https://quasar.dev/security/report-a-vulnerability) + +_build_ + +Quasar CLI (with Vite) + +[Upgrade guide\\ +\\ +NEW!](https://quasar.dev/quasar-cli-vite/upgrade-guide) [The quasar.config file](https://quasar.dev/quasar-cli-vite/quasar-config-file) [Convert project to CLI with Vite](https://quasar.dev/quasar-cli-vite/convert-to-quasar-cli-with-vite) [Browser Compatibility](https://quasar.dev/quasar-cli-vite/browser-compatibility) [Supporting TypeScript](https://quasar.dev/quasar-cli-vite/supporting-ts) [Directory Structure](https://quasar.dev/quasar-cli-vite/directory-structure) [Commands List](https://quasar.dev/quasar-cli-vite/commands-list) [CSS Preprocessors](https://quasar.dev/quasar-cli-vite/css-preprocessors) [Routing](https://quasar.dev/quasar-cli-vite/routing) [Lazy Loading - Code Splitting](https://quasar.dev/quasar-cli-vite/lazy-loading) [Handling Assets](https://quasar.dev/quasar-cli-vite/handling-assets) [Boot Files](https://quasar.dev/quasar-cli-vite/boot-files) [Prefetch Feature](https://quasar.dev/quasar-cli-vite/prefetch-feature) [API Proxying](https://quasar.dev/quasar-cli-vite/api-proxying) [Handling Vite](https://quasar.dev/quasar-cli-vite/handling-vite) [Handling process.env](https://quasar.dev/quasar-cli-vite/handling-process-env) [State Management with Pinia](https://quasar.dev/quasar-cli-vite/state-management-with-pinia) [Linter](https://quasar.dev/quasar-cli-vite/linter) [Testing & Auditing](https://quasar.dev/quasar-cli-vite/testing-and-auditing) + +SPA mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-spa/introduction) [App Icons for SPA](https://quasar.dev/quasar-cli-vite/developing-spa/app-icons-spa) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-spa/build-commands) [Deploying](https://quasar.dev/quasar-cli-vite/developing-spa/deploying) + +SSR mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-ssr/introduction) [Writing Universal Code](https://quasar.dev/quasar-cli-vite/developing-ssr/writing-universal-code) [Preparation](https://quasar.dev/quasar-cli-vite/developing-ssr/preparation) [Configuring SSR](https://quasar.dev/quasar-cli-vite/developing-ssr/configuring-ssr) [ssrContext](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-context) [SSR Middleware](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-middleware) [SSR Webserver](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-webserver) [Vue SSR Directives](https://quasar.dev/quasar-cli-vite/developing-ssr/vue-ssr-directives) [App Icons for SSR](https://quasar.dev/quasar-cli-vite/developing-ssr/app-icons-ssr) [SEO for SSR](https://quasar.dev/quasar-cli-vite/developing-ssr/seo-for-ssr) [Client Side Hydration](https://quasar.dev/quasar-cli-vite/developing-ssr/client-side-hydration) [Handling 404 and 500 Errors](https://quasar.dev/quasar-cli-vite/developing-ssr/handling-404-and-500-errors) [SSR with PWA](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-with-pwa) [SSR FAQ](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-frequently-asked-questions) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-ssr/build-commands) [SSR with Typescript](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-with-typescript) [Deploying](https://quasar.dev/quasar-cli-vite/developing-ssr/deploying) + +PWA mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-pwa/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-pwa/preparation) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-pwa/build-commands) [Configuring PWA](https://quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa) [HMR for PWA](https://quasar.dev/quasar-cli-vite/developing-pwa/hmr-for-dev) [App Icons for PWA](https://quasar.dev/quasar-cli-vite/developing-pwa/app-icons-pwa) [Handling Service Worker](https://quasar.dev/quasar-cli-vite/developing-pwa/handling-service-worker) [PWA with Typescript](https://quasar.dev/quasar-cli-vite/developing-pwa/pwa-with-typescript) + +[Developing Mobile Apps](https://quasar.dev/quasar-cli-vite/developing-mobile-apps) + +Capacitor mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/preparation) [Capacitor versions](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/capacitor-version-support) [Configuring Capacitor](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/configuring-capacitor) [App Icons for Capacitor](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/app-icons-capacitor) [Capacitor API](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/capacitor-api) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/publishing-to-store) + +Cordova mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/preparation) [Configuring Cordova](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/configuring-cordova) [App Icons for Cordova](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/app-icons-cordova) [Cordova Plugins](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/cordova-plugins) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/publishing-to-store) + +Electron mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-electron-apps/introduction) [Upgrade guide](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-upgrade-guide) [Preparation](https://quasar.dev/quasar-cli-vite/developing-electron-apps/preparation) [Configuring Electron](https://quasar.dev/quasar-cli-vite/developing-electron-apps/configuring-electron) [App Icons for Electron](https://quasar.dev/quasar-cli-vite/developing-electron-apps/app-icons-electron) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-electron-apps/build-commands) [Preload Script](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-preload-script) [Electron Packages](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-packages) [Accessing files](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-accessing-files) [Frameless Electron Window](https://quasar.dev/quasar-cli-vite/developing-electron-apps/frameless-electron-window) [Electron with Typescript](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-with-typescript) [Electron Security Concerns](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-security-concerns) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-vite/developing-electron-apps/troubleshooting-and-tips) + +Browser Extensions mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/preparation) [Configuring BEX](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex) [App Icons for BEX](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/app-icons-browser-extension) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/build-commands) [Types of BEX](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/types-of-bex) [BEX Bridge Communication](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/bex-bridge) [Background Script](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/background-script) [Content Scripts](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/content-scripts) + +[Ajax Requests](https://quasar.dev/quasar-cli-vite/ajax-requests) [Opening Dev Server To Public](https://quasar.dev/quasar-cli-vite/opening-dev-server-to-public) + +_build_ + +Quasar CLI (with Webpack) + +[Upgrade guide\\ +\\ +NEW!](https://quasar.dev/quasar-cli-webpack/upgrade-guide) [The quasar.config file](https://quasar.dev/quasar-cli-webpack/quasar-config-file) [Convert to CLI with Webpack](https://quasar.dev/quasar-cli-webpack/convert-to-quasar-cli-with-webpack) [Browser Compatibility](https://quasar.dev/quasar-cli-webpack/browser-compatibility) [Supporting TypeScript](https://quasar.dev/quasar-cli-webpack/supporting-ts) [Directory Structure](https://quasar.dev/quasar-cli-webpack/directory-structure) [Commands List](https://quasar.dev/quasar-cli-webpack/commands-list) [CSS Preprocessors](https://quasar.dev/quasar-cli-webpack/css-preprocessors) [Routing](https://quasar.dev/quasar-cli-webpack/routing) [Lazy Loading - Code Splitting](https://quasar.dev/quasar-cli-webpack/lazy-loading) [Handling Assets](https://quasar.dev/quasar-cli-webpack/handling-assets) [Boot Files](https://quasar.dev/quasar-cli-webpack/boot-files) [Prefetch Feature](https://quasar.dev/quasar-cli-webpack/prefetch-feature) [API Proxying](https://quasar.dev/quasar-cli-webpack/api-proxying) [Handling Webpack](https://quasar.dev/quasar-cli-webpack/handling-webpack) [Handling process.env](https://quasar.dev/quasar-cli-webpack/handling-process-env) [State Management with Pinia](https://quasar.dev/quasar-cli-webpack/state-management-with-pinia) [Linter](https://quasar.dev/quasar-cli-webpack/linter) [Testing & Auditing](https://quasar.dev/quasar-cli-webpack/testing-and-auditing) + +SPA mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-spa/introduction) [App Icons for SPA](https://quasar.dev/quasar-cli-webpack/developing-spa/app-icons-spa) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-spa/build-commands) [Deploying](https://quasar.dev/quasar-cli-webpack/developing-spa/deploying) + +SSR mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-ssr/introduction) [Writing Universal Code](https://quasar.dev/quasar-cli-webpack/developing-ssr/writing-universal-code) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-ssr/preparation) [Configuring SSR](https://quasar.dev/quasar-cli-webpack/developing-ssr/configuring-ssr) [ssrContext](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-context) [SSR Middleware](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-middleware) [SSR Webserver](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-webserver) [Vue SSR Directives](https://quasar.dev/quasar-cli-webpack/developing-ssr/vue-ssr-directives) [App Icons for SSR](https://quasar.dev/quasar-cli-webpack/developing-ssr/app-icons-ssr) [SEO for SSR](https://quasar.dev/quasar-cli-webpack/developing-ssr/seo-for-ssr) [Client Side Hydration](https://quasar.dev/quasar-cli-webpack/developing-ssr/client-side-hydration) [Handling 404 and 500 Errors](https://quasar.dev/quasar-cli-webpack/developing-ssr/handling-404-and-500-errors) [SSR with PWA](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-with-pwa) [SSR FAQ](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-frequently-asked-questions) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-ssr/build-commands) [SSR with Typescript](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-with-typescript) [Deploying](https://quasar.dev/quasar-cli-webpack/developing-ssr/deploying) + +PWA mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-pwa/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-pwa/preparation) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-pwa/build-commands) [Configuring PWA](https://quasar.dev/quasar-cli-webpack/developing-pwa/configuring-pwa) [HMR for PWA](https://quasar.dev/quasar-cli-webpack/developing-pwa/hmr-for-dev) [App Icons for PWA](https://quasar.dev/quasar-cli-webpack/developing-pwa/app-icons-pwa) [Handling Service Worker](https://quasar.dev/quasar-cli-webpack/developing-pwa/handling-service-worker) [PWA with Typescript](https://quasar.dev/quasar-cli-webpack/developing-pwa/pwa-with-typescript) + +[Developing Mobile Apps](https://quasar.dev/quasar-cli-webpack/developing-mobile-apps) + +Capacitor mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/preparation) [Capacitor versions](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/capacitor-version-support) [Configuring Capacitor](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/configuring-capacitor) [App Icons for Capacitor](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/app-icons-capacitor) [Capacitor API](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/capacitor-api) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/publishing-to-store) + +Cordova mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/preparation) [Configuring Cordova](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/configuring-cordova) [App Icons for Cordova](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/app-icons-cordova) [Cordova Plugins](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/cordova-plugins) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/publishing-to-store) + +Electron mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/introduction) [Upgrade guide](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-upgrade-guide) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/preparation) [Configuring Electron](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/configuring-electron) [App Icons for Electron](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/app-icons-electron) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/build-commands) [Preload Script](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-preload-script) [Electron Packages](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-packages) [Accessing files](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-accessing-files) [Frameless Electron Window](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/frameless-electron-window) [Electron with Typescript](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-with-typescript) [Electron Security Concerns](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-security-concerns) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/troubleshooting-and-tips) + +Browser Extensions mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/preparation) [Configuring BEX](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/configuring-bex) [App Icons for BEX](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/app-icons-browser-extension) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/build-commands) [Types of BEX](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/types-of-bex) [BEX Bridge Communication](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/bex-bridge) [Background Script](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/background-script) [Content Scripts](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/content-scripts) + +[Ajax Requests](https://quasar.dev/quasar-cli-webpack/ajax-requests) [Opening Dev Server To Public](https://quasar.dev/quasar-cli-webpack/opening-dev-server-to-public) + +_stars_ + +Icon Genie CLI + +[Introduction](https://quasar.dev/icongenie/introduction) [Installation / Upgrade notes](https://quasar.dev/icongenie/installation) [Command list](https://quasar.dev/icongenie/command-list) [App Icons List](https://quasar.dev/icongenie/app-icons-list) [Profile files](https://quasar.dev/icongenie/profile-files) + +_note\_add_ + +App Extensions + +[Introduction](https://quasar.dev/app-extensions/introduction) [Discover App Extensions](https://quasar.dev/app-extensions/discover) + +Development Guide + +[Introduction](https://quasar.dev/app-extensions/development-guide/introduction) [Prompts API](https://quasar.dev/app-extensions/development-guide/prompts-api) [Install API](https://quasar.dev/app-extensions/development-guide/install-api) [Index API](https://quasar.dev/app-extensions/development-guide/index-api) [Uninstall API](https://quasar.dev/app-extensions/development-guide/uninstall-api) + +Tips and Tricks + +[Introduction](https://quasar.dev/app-extensions/tips-and-tricks/introduction) [Provide a UI component](https://quasar.dev/app-extensions/tips-and-tricks/provide-a-ui-component) [Provide a directive](https://quasar.dev/app-extensions/tips-and-tricks/provide-a-directive) [Inject Quasar Plugin](https://quasar.dev/app-extensions/tips-and-tricks/inject-quasar-plugin) [Starter kit equivalent](https://quasar.dev/app-extensions/tips-and-tricks/starter-kit-equivalent) [Chain Webpack](https://quasar.dev/app-extensions/tips-and-tricks/chain-webpack) + +_healing_ + +Quasar Utils + +[Date Utils](https://quasar.dev/quasar-utils/date-utils) [Color Utils](https://quasar.dev/quasar-utils/color-utils) [DOM Utils](https://quasar.dev/quasar-utils/dom-utils) [Morph Utils](https://quasar.dev/quasar-utils/morph-utils) [Formatter Utils](https://quasar.dev/quasar-utils/formatter-utils) [Scrolling Utils](https://quasar.dev/quasar-utils/scrolling-utils) [Type Checking Utils](https://quasar.dev/quasar-utils/type-checking-utils) [EventBus Util](https://quasar.dev/quasar-utils/event-bus-util) [Other Utils](https://quasar.dev/quasar-utils/other-utils) + +Layout Gallery + +[Layout and Grid\\ +\\ +Layout](https://quasar.dev/layout/layout) [Layout and Grid\\ +\\ +Layout Header and Footer](https://quasar.dev/layout/header-and-footer) [Layout and Grid\\ +\\ +Layout Drawer](https://quasar.dev/layout/drawer) [Layout and Grid\\ +\\ +Layout Page](https://quasar.dev/layout/page) + +As a way to help you get started quicker, we’ve written a few ready Quasar Layouts for you. Please also take time to learn each Quasar component, otherwise you’ll be missing a lot of features. + +Youtube + +* * * + +[![Layout Screenshot](https://cdn.quasar.dev/img/layout-gallery/screenshot-youtube.png)](https://quasar.dev/layout/gallery/youtube) + +Google Play + +* * * + +[![Layout Screenshot](https://cdn.quasar.dev/img/layout-gallery/screenshot-google-play.png)](https://quasar.dev/layout/gallery/google-play) + +GitHub + +* * * + +[![Layout Screenshot](https://cdn.quasar.dev/img/layout-gallery/screenshot-github.png)](https://quasar.dev/layout/gallery/github) + +Google Photos + +* * * + +[![Layout Screenshot](https://cdn.quasar.dev/img/layout-gallery/screenshot-google-photos.png)](https://quasar.dev/layout/gallery/google-photos) + +Google News + +* * * + +[![Layout Screenshot](https://cdn.quasar.dev/img/layout-gallery/screenshot-google-news.png)](https://quasar.dev/layout/gallery/google-news) + +Whatsapp + +* * * + +[![Layout Screenshot](https://cdn.quasar.dev/img/layout-gallery/screenshot-whatsapp.png)](https://quasar.dev/layout/gallery/whatsapp) + +Quasar Classic + +* * * + +[![Layout Screenshot](https://cdn.quasar.dev/img/layout-gallery/screenshot-quasar-classic.png)](https://quasar.dev/layout/gallery/quasar-classic) + +Quasar Classic (Dark) + +* * * + +[![Layout Screenshot](https://cdn.quasar.dev/img/layout-gallery/screenshot-quasar-classic-dark.png)](https://quasar.dev/layout/gallery/quasar-classic-dark) + +Ready for more? + +[Layout and Grid\\ +\\ +Layout Page](https://quasar.dev/layout/page) [Layout and Grid\\ +\\ +Page Sticky](https://quasar.dev/layout/page-sticky) + +* * * + +Caught a mistake? [Edit this page in browser](https://github.com/quasarframework/quasar/edit/dev/docs/src/pages/layout/gallery/gallery.md) + +[MIT License](https://github.com/quasarframework/quasar/blob/dev/LICENSE) [Privacy Policy](https://www.iubenda.com/privacy-policy/40685560) + +Copyright © 2015-present PULSARDEV SRL, [Razvan Stoenescu](https://github.com/rstoenescu) + +This website has been designed in collaboration with [Dreamonkey Srl](https://www.dreamonkey.com/) + +## Support Quasar Framework +[_assignment\_late_\\ +\\ +Why donate](https://quasar.dev/why-donate) [_travel\_explore_\\ +\\ +API Explorer](https://quasar.dev/api-explorer) + +_code_ + +How to contribute + +[Contribution Guide](https://quasar.dev/how-to-contribute/contribution-guide) [Running Projects](https://quasar.dev/how-to-contribute/running-projects) [Start a New Project](https://quasar.dev/how-to-contribute/new-project) [Project Maintainer Role](https://quasar.dev/how-to-contribute/project-maintainer) [Commit Conventions](https://quasar.dev/how-to-contribute/commit-conventions) + +_tune_ + +Options & Helpers + +[The $q object](https://quasar.dev/options/the-q-object) [App Icons](https://quasar.dev/options/app-icons) [SEO](https://quasar.dev/options/seo) [Quasar Language Packs](https://quasar.dev/options/quasar-language-packs) [App Internationalization](https://quasar.dev/options/app-internationalization) [RTL Support](https://quasar.dev/options/rtl-support) [Installing Icon Libraries](https://quasar.dev/options/installing-icon-libraries) [Quasar Icon Sets](https://quasar.dev/options/quasar-icon-sets) [Platform Detection](https://quasar.dev/options/platform-detection) [Screen Plugin](https://quasar.dev/options/screen-plugin) [Animations](https://quasar.dev/options/animations) [Transitions](https://quasar.dev/options/transitions) + +_style_ + +Style & Identity + +[Typography](https://quasar.dev/style/typography) [Color Palette](https://quasar.dev/style/color-palette) [Theme Builder](https://quasar.dev/style/theme-builder) [Dark Mode](https://quasar.dev/style/dark-mode) [Spacing](https://quasar.dev/style/spacing) [Shadows](https://quasar.dev/style/shadows) [Breakpoints](https://quasar.dev/style/breakpoints) [Body classes](https://quasar.dev/style/body-classes) [Visibility](https://quasar.dev/style/visibility) [Positioning](https://quasar.dev/style/positioning) [Sass/SCSS Variables](https://quasar.dev/style/sass-scss-variables) [Other Helper Classes](https://quasar.dev/style/other-helper-classes) + +_view\_quilt_ + +Layout and Grid + +Flex Grid + +[Introduction to Flexbox](https://quasar.dev/layout/grid/introduction-to-flexbox) [Grid Row](https://quasar.dev/layout/grid/row) [Grid Column](https://quasar.dev/layout/grid/column) [Grid Gutter](https://quasar.dev/layout/grid/gutter) [Flexbox patterns](https://quasar.dev/layout/grid/flexbox-patterns) [Flex Playground](https://quasar.dev/layout/grid/flex-playground) + +[Layout](https://quasar.dev/layout/layout) [Routing with Layouts and Pages](https://quasar.dev/layout/routing-with-layouts-and-pages) [Layout Header and Footer](https://quasar.dev/layout/header-and-footer) [Layout Drawer](https://quasar.dev/layout/drawer) [Layout Page](https://quasar.dev/layout/page) [Layout Builder](https://quasar.dev/layout-builder) [Layout Gallery](https://quasar.dev/layout/gallery) [Page Sticky](https://quasar.dev/layout/page-sticky) [Page Scroller](https://quasar.dev/layout/page-scroller) + +_widgets_ + +Vue Components + +[Ajax Bar](https://quasar.dev/vue-components/ajax-bar) [Avatar](https://quasar.dev/vue-components/avatar) [Badge](https://quasar.dev/vue-components/badge) [Banner](https://quasar.dev/vue-components/banner) [Bar](https://quasar.dev/vue-components/bar) [Breadcrumbs](https://quasar.dev/vue-components/breadcrumbs) + +Buttons + +[Button](https://quasar.dev/vue-components/button) [Button Group](https://quasar.dev/vue-components/button-group) [Button Dropdown](https://quasar.dev/vue-components/button-dropdown) + +[Card](https://quasar.dev/vue-components/card) [Carousel](https://quasar.dev/vue-components/carousel) [Chat Message](https://quasar.dev/vue-components/chat) [Chip](https://quasar.dev/vue-components/chip) [Circular Progress](https://quasar.dev/vue-components/circular-progress) [Color Picker](https://quasar.dev/vue-components/color-picker) [Dialog](https://quasar.dev/vue-components/dialog) [Editor - WYSIWYG](https://quasar.dev/vue-components/editor) [Expansion Item](https://quasar.dev/vue-components/expansion-item) [Floating Action Button](https://quasar.dev/vue-components/floating-action-button) + +Form Components + +[Input Textfield](https://quasar.dev/vue-components/input) [Select](https://quasar.dev/vue-components/select) [File picker](https://quasar.dev/vue-components/file) [Form](https://quasar.dev/vue-components/form) [Field (wrapper)](https://quasar.dev/vue-components/field) [Radio](https://quasar.dev/vue-components/radio) [Checkbox](https://quasar.dev/vue-components/checkbox) [Toggle](https://quasar.dev/vue-components/toggle) [Button Toggle](https://quasar.dev/vue-components/button-toggle) [Option Group](https://quasar.dev/vue-components/option-group) [Slider](https://quasar.dev/vue-components/slider) [Range](https://quasar.dev/vue-components/range) [Time Picker](https://quasar.dev/vue-components/time) [Date Picker](https://quasar.dev/vue-components/date) + +[Icon](https://quasar.dev/vue-components/icon) [Img](https://quasar.dev/vue-components/img) [Infinite Scroll](https://quasar.dev/vue-components/infinite-scroll) [Inner Loading](https://quasar.dev/vue-components/inner-loading) [Intersection](https://quasar.dev/vue-components/intersection) [Knob](https://quasar.dev/vue-components/knob) [Linear Progress](https://quasar.dev/vue-components/linear-progress) [List & List Items](https://quasar.dev/vue-components/list-and-list-items) [Markup Table](https://quasar.dev/vue-components/markup-table) [Menu](https://quasar.dev/vue-components/menu) [No SSR](https://quasar.dev/vue-components/no-ssr) + +Observers + +[Resize Observer (for Element)](https://quasar.dev/vue-components/resize-observer) [Scroll Observer](https://quasar.dev/vue-components/scroll-observer) + +[Pagination](https://quasar.dev/vue-components/pagination) [Parallax](https://quasar.dev/vue-components/parallax) [Popup Edit](https://quasar.dev/vue-components/popup-edit) [Popup Proxy](https://quasar.dev/vue-components/popup-proxy) [Pull to refresh](https://quasar.dev/vue-components/pull-to-refresh) [Rating](https://quasar.dev/vue-components/rating) [Responsive](https://quasar.dev/vue-components/responsive) [Scroll Area](https://quasar.dev/vue-components/scroll-area) [Separator](https://quasar.dev/vue-components/separator) [Skeleton](https://quasar.dev/vue-components/skeleton) [Slide Item](https://quasar.dev/vue-components/slide-item) [Slide Transition](https://quasar.dev/vue-components/slide-transition) [Space](https://quasar.dev/vue-components/space) [Spinners](https://quasar.dev/vue-components/spinners) [Splitter](https://quasar.dev/vue-components/splitter) [Stepper](https://quasar.dev/vue-components/stepper) [Table](https://quasar.dev/vue-components/table) [Tabs](https://quasar.dev/vue-components/tabs) [Tab Panels](https://quasar.dev/vue-components/tab-panels) [Timeline](https://quasar.dev/vue-components/timeline) [Toolbar](https://quasar.dev/vue-components/toolbar) [Tooltip](https://quasar.dev/vue-components/tooltip) [Tree](https://quasar.dev/vue-components/tree) [Uploader](https://quasar.dev/vue-components/uploader) [Video](https://quasar.dev/vue-components/video) [Virtual Scroll](https://quasar.dev/vue-components/virtual-scroll) + +_swap\_calls_ + +Vue Directives + +[Close Popup](https://quasar.dev/vue-directives/close-popup) [Intersection](https://quasar.dev/vue-directives/intersection) [Material Ripples](https://quasar.dev/vue-directives/material-ripples) [Mutation](https://quasar.dev/vue-directives/mutation) [Morph](https://quasar.dev/vue-directives/morph) [Scroll](https://quasar.dev/vue-directives/scroll) [Scroll Fire](https://quasar.dev/vue-directives/scroll-fire) [Touch Hold](https://quasar.dev/vue-directives/touch-hold) [Touch Pan](https://quasar.dev/vue-directives/touch-pan) [Touch Repeat](https://quasar.dev/vue-directives/touch-repeat) [Touch Swipe](https://quasar.dev/vue-directives/touch-swipe) + +_extension_ + +Quasar Plugins + +[Addressbar Color](https://quasar.dev/quasar-plugins/addressbar-color) [App Fullscreen](https://quasar.dev/quasar-plugins/app-fullscreen) [App Visibility](https://quasar.dev/quasar-plugins/app-visibility) [Bottom Sheet](https://quasar.dev/quasar-plugins/bottom-sheet) [Cookies](https://quasar.dev/quasar-plugins/cookies) [Dark](https://quasar.dev/quasar-plugins/dark) [Dialog](https://quasar.dev/quasar-plugins/dialog) [Loading](https://quasar.dev/quasar-plugins/loading) [Loading Bar](https://quasar.dev/quasar-plugins/loading-bar) [Local/Session Storage](https://quasar.dev/quasar-plugins/web-storage) [Meta](https://quasar.dev/quasar-plugins/meta) [Notify](https://quasar.dev/quasar-plugins/notify) + +_developer\_mode_ + +Vue Composables + +[useQuasar](https://quasar.dev/vue-composables/use-quasar) [useDialogPluginComponent](https://quasar.dev/vue-composables/use-dialog-plugin-component) [useFormChild](https://quasar.dev/vue-composables/use-form-child) [useMeta](https://quasar.dev/vue-composables/use-meta) [useHydration\\ +\\ +new](https://quasar.dev/vue-composables/use-hydration) [useId\\ +\\ +new](https://quasar.dev/vue-composables/use-id) [useInterval\\ +\\ +new](https://quasar.dev/vue-composables/use-interval) [useRenderCache\\ +\\ +new](https://quasar.dev/vue-composables/use-render-cache) [useTick\\ +\\ +new](https://quasar.dev/vue-composables/use-tick) [useTimeout\\ +\\ +new](https://quasar.dev/vue-composables/use-timeout) [useSplitAttrs\\ +\\ +new](https://quasar.dev/vue-composables/use-split-attrs) + +_security_ + +Security + +[DO's and DON'Ts](https://quasar.dev/security/dos-and-donts) [Report a vulnerability](https://quasar.dev/security/report-a-vulnerability) + +_build_ + +Quasar CLI (with Vite) + +[Upgrade guide\\ +\\ +NEW!](https://quasar.dev/quasar-cli-vite/upgrade-guide) [The quasar.config file](https://quasar.dev/quasar-cli-vite/quasar-config-file) [Convert project to CLI with Vite](https://quasar.dev/quasar-cli-vite/convert-to-quasar-cli-with-vite) [Browser Compatibility](https://quasar.dev/quasar-cli-vite/browser-compatibility) [Supporting TypeScript](https://quasar.dev/quasar-cli-vite/supporting-ts) [Directory Structure](https://quasar.dev/quasar-cli-vite/directory-structure) [Commands List](https://quasar.dev/quasar-cli-vite/commands-list) [CSS Preprocessors](https://quasar.dev/quasar-cli-vite/css-preprocessors) [Routing](https://quasar.dev/quasar-cli-vite/routing) [Lazy Loading - Code Splitting](https://quasar.dev/quasar-cli-vite/lazy-loading) [Handling Assets](https://quasar.dev/quasar-cli-vite/handling-assets) [Boot Files](https://quasar.dev/quasar-cli-vite/boot-files) [Prefetch Feature](https://quasar.dev/quasar-cli-vite/prefetch-feature) [API Proxying](https://quasar.dev/quasar-cli-vite/api-proxying) [Handling Vite](https://quasar.dev/quasar-cli-vite/handling-vite) [Handling process.env](https://quasar.dev/quasar-cli-vite/handling-process-env) [State Management with Pinia](https://quasar.dev/quasar-cli-vite/state-management-with-pinia) [Linter](https://quasar.dev/quasar-cli-vite/linter) [Testing & Auditing](https://quasar.dev/quasar-cli-vite/testing-and-auditing) + +SPA mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-spa/introduction) [App Icons for SPA](https://quasar.dev/quasar-cli-vite/developing-spa/app-icons-spa) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-spa/build-commands) [Deploying](https://quasar.dev/quasar-cli-vite/developing-spa/deploying) + +SSR mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-ssr/introduction) [Writing Universal Code](https://quasar.dev/quasar-cli-vite/developing-ssr/writing-universal-code) [Preparation](https://quasar.dev/quasar-cli-vite/developing-ssr/preparation) [Configuring SSR](https://quasar.dev/quasar-cli-vite/developing-ssr/configuring-ssr) [ssrContext](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-context) [SSR Middleware](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-middleware) [SSR Webserver](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-webserver) [Vue SSR Directives](https://quasar.dev/quasar-cli-vite/developing-ssr/vue-ssr-directives) [App Icons for SSR](https://quasar.dev/quasar-cli-vite/developing-ssr/app-icons-ssr) [SEO for SSR](https://quasar.dev/quasar-cli-vite/developing-ssr/seo-for-ssr) [Client Side Hydration](https://quasar.dev/quasar-cli-vite/developing-ssr/client-side-hydration) [Handling 404 and 500 Errors](https://quasar.dev/quasar-cli-vite/developing-ssr/handling-404-and-500-errors) [SSR with PWA](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-with-pwa) [SSR FAQ](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-frequently-asked-questions) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-ssr/build-commands) [SSR with Typescript](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-with-typescript) [Deploying](https://quasar.dev/quasar-cli-vite/developing-ssr/deploying) + +PWA mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-pwa/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-pwa/preparation) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-pwa/build-commands) [Configuring PWA](https://quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa) [HMR for PWA](https://quasar.dev/quasar-cli-vite/developing-pwa/hmr-for-dev) [App Icons for PWA](https://quasar.dev/quasar-cli-vite/developing-pwa/app-icons-pwa) [Handling Service Worker](https://quasar.dev/quasar-cli-vite/developing-pwa/handling-service-worker) [PWA with Typescript](https://quasar.dev/quasar-cli-vite/developing-pwa/pwa-with-typescript) + +[Developing Mobile Apps](https://quasar.dev/quasar-cli-vite/developing-mobile-apps) + +Capacitor mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/preparation) [Capacitor versions](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/capacitor-version-support) [Configuring Capacitor](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/configuring-capacitor) [App Icons for Capacitor](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/app-icons-capacitor) [Capacitor API](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/capacitor-api) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/publishing-to-store) + +Cordova mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/preparation) [Configuring Cordova](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/configuring-cordova) [App Icons for Cordova](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/app-icons-cordova) [Cordova Plugins](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/cordova-plugins) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/publishing-to-store) + +Electron mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-electron-apps/introduction) [Upgrade guide](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-upgrade-guide) [Preparation](https://quasar.dev/quasar-cli-vite/developing-electron-apps/preparation) [Configuring Electron](https://quasar.dev/quasar-cli-vite/developing-electron-apps/configuring-electron) [App Icons for Electron](https://quasar.dev/quasar-cli-vite/developing-electron-apps/app-icons-electron) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-electron-apps/build-commands) [Preload Script](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-preload-script) [Electron Packages](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-packages) [Accessing files](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-accessing-files) [Frameless Electron Window](https://quasar.dev/quasar-cli-vite/developing-electron-apps/frameless-electron-window) [Electron with Typescript](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-with-typescript) [Electron Security Concerns](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-security-concerns) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-vite/developing-electron-apps/troubleshooting-and-tips) + +Browser Extensions mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/preparation) [Configuring BEX](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex) [App Icons for BEX](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/app-icons-browser-extension) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/build-commands) [Types of BEX](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/types-of-bex) [BEX Bridge Communication](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/bex-bridge) [Background Script](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/background-script) [Content Scripts](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/content-scripts) + +[Ajax Requests](https://quasar.dev/quasar-cli-vite/ajax-requests) [Opening Dev Server To Public](https://quasar.dev/quasar-cli-vite/opening-dev-server-to-public) + +_build_ + +Quasar CLI (with Webpack) + +[Upgrade guide\\ +\\ +NEW!](https://quasar.dev/quasar-cli-webpack/upgrade-guide) [The quasar.config file](https://quasar.dev/quasar-cli-webpack/quasar-config-file) [Convert to CLI with Webpack](https://quasar.dev/quasar-cli-webpack/convert-to-quasar-cli-with-webpack) [Browser Compatibility](https://quasar.dev/quasar-cli-webpack/browser-compatibility) [Supporting TypeScript](https://quasar.dev/quasar-cli-webpack/supporting-ts) [Directory Structure](https://quasar.dev/quasar-cli-webpack/directory-structure) [Commands List](https://quasar.dev/quasar-cli-webpack/commands-list) [CSS Preprocessors](https://quasar.dev/quasar-cli-webpack/css-preprocessors) [Routing](https://quasar.dev/quasar-cli-webpack/routing) [Lazy Loading - Code Splitting](https://quasar.dev/quasar-cli-webpack/lazy-loading) [Handling Assets](https://quasar.dev/quasar-cli-webpack/handling-assets) [Boot Files](https://quasar.dev/quasar-cli-webpack/boot-files) [Prefetch Feature](https://quasar.dev/quasar-cli-webpack/prefetch-feature) [API Proxying](https://quasar.dev/quasar-cli-webpack/api-proxying) [Handling Webpack](https://quasar.dev/quasar-cli-webpack/handling-webpack) [Handling process.env](https://quasar.dev/quasar-cli-webpack/handling-process-env) [State Management with Pinia](https://quasar.dev/quasar-cli-webpack/state-management-with-pinia) [Linter](https://quasar.dev/quasar-cli-webpack/linter) [Testing & Auditing](https://quasar.dev/quasar-cli-webpack/testing-and-auditing) + +SPA mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-spa/introduction) [App Icons for SPA](https://quasar.dev/quasar-cli-webpack/developing-spa/app-icons-spa) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-spa/build-commands) [Deploying](https://quasar.dev/quasar-cli-webpack/developing-spa/deploying) + +SSR mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-ssr/introduction) [Writing Universal Code](https://quasar.dev/quasar-cli-webpack/developing-ssr/writing-universal-code) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-ssr/preparation) [Configuring SSR](https://quasar.dev/quasar-cli-webpack/developing-ssr/configuring-ssr) [ssrContext](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-context) [SSR Middleware](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-middleware) [SSR Webserver](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-webserver) [Vue SSR Directives](https://quasar.dev/quasar-cli-webpack/developing-ssr/vue-ssr-directives) [App Icons for SSR](https://quasar.dev/quasar-cli-webpack/developing-ssr/app-icons-ssr) [SEO for SSR](https://quasar.dev/quasar-cli-webpack/developing-ssr/seo-for-ssr) [Client Side Hydration](https://quasar.dev/quasar-cli-webpack/developing-ssr/client-side-hydration) [Handling 404 and 500 Errors](https://quasar.dev/quasar-cli-webpack/developing-ssr/handling-404-and-500-errors) [SSR with PWA](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-with-pwa) [SSR FAQ](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-frequently-asked-questions) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-ssr/build-commands) [SSR with Typescript](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-with-typescript) [Deploying](https://quasar.dev/quasar-cli-webpack/developing-ssr/deploying) + +PWA mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-pwa/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-pwa/preparation) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-pwa/build-commands) [Configuring PWA](https://quasar.dev/quasar-cli-webpack/developing-pwa/configuring-pwa) [HMR for PWA](https://quasar.dev/quasar-cli-webpack/developing-pwa/hmr-for-dev) [App Icons for PWA](https://quasar.dev/quasar-cli-webpack/developing-pwa/app-icons-pwa) [Handling Service Worker](https://quasar.dev/quasar-cli-webpack/developing-pwa/handling-service-worker) [PWA with Typescript](https://quasar.dev/quasar-cli-webpack/developing-pwa/pwa-with-typescript) + +[Developing Mobile Apps](https://quasar.dev/quasar-cli-webpack/developing-mobile-apps) + +Capacitor mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/preparation) [Capacitor versions](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/capacitor-version-support) [Configuring Capacitor](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/configuring-capacitor) [App Icons for Capacitor](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/app-icons-capacitor) [Capacitor API](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/capacitor-api) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/publishing-to-store) + +Cordova mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/preparation) [Configuring Cordova](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/configuring-cordova) [App Icons for Cordova](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/app-icons-cordova) [Cordova Plugins](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/cordova-plugins) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/publishing-to-store) + +Electron mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/introduction) [Upgrade guide](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-upgrade-guide) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/preparation) [Configuring Electron](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/configuring-electron) [App Icons for Electron](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/app-icons-electron) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/build-commands) [Preload Script](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-preload-script) [Electron Packages](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-packages) [Accessing files](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-accessing-files) [Frameless Electron Window](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/frameless-electron-window) [Electron with Typescript](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-with-typescript) [Electron Security Concerns](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-security-concerns) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/troubleshooting-and-tips) + +Browser Extensions mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/preparation) [Configuring BEX](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/configuring-bex) [App Icons for BEX](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/app-icons-browser-extension) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/build-commands) [Types of BEX](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/types-of-bex) [BEX Bridge Communication](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/bex-bridge) [Background Script](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/background-script) [Content Scripts](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/content-scripts) + +[Ajax Requests](https://quasar.dev/quasar-cli-webpack/ajax-requests) [Opening Dev Server To Public](https://quasar.dev/quasar-cli-webpack/opening-dev-server-to-public) + +_stars_ + +Icon Genie CLI + +[Introduction](https://quasar.dev/icongenie/introduction) [Installation / Upgrade notes](https://quasar.dev/icongenie/installation) [Command list](https://quasar.dev/icongenie/command-list) [App Icons List](https://quasar.dev/icongenie/app-icons-list) [Profile files](https://quasar.dev/icongenie/profile-files) + +_note\_add_ + +App Extensions + +[Introduction](https://quasar.dev/app-extensions/introduction) [Discover App Extensions](https://quasar.dev/app-extensions/discover) + +Development Guide + +[Introduction](https://quasar.dev/app-extensions/development-guide/introduction) [Prompts API](https://quasar.dev/app-extensions/development-guide/prompts-api) [Install API](https://quasar.dev/app-extensions/development-guide/install-api) [Index API](https://quasar.dev/app-extensions/development-guide/index-api) [Uninstall API](https://quasar.dev/app-extensions/development-guide/uninstall-api) + +Tips and Tricks + +[Introduction](https://quasar.dev/app-extensions/tips-and-tricks/introduction) [Provide a UI component](https://quasar.dev/app-extensions/tips-and-tricks/provide-a-ui-component) [Provide a directive](https://quasar.dev/app-extensions/tips-and-tricks/provide-a-directive) [Inject Quasar Plugin](https://quasar.dev/app-extensions/tips-and-tricks/inject-quasar-plugin) [Starter kit equivalent](https://quasar.dev/app-extensions/tips-and-tricks/starter-kit-equivalent) [Chain Webpack](https://quasar.dev/app-extensions/tips-and-tricks/chain-webpack) + +_healing_ + +Quasar Utils + +[Date Utils](https://quasar.dev/quasar-utils/date-utils) [Color Utils](https://quasar.dev/quasar-utils/color-utils) [DOM Utils](https://quasar.dev/quasar-utils/dom-utils) [Morph Utils](https://quasar.dev/quasar-utils/morph-utils) [Formatter Utils](https://quasar.dev/quasar-utils/formatter-utils) [Scrolling Utils](https://quasar.dev/quasar-utils/scrolling-utils) [Type Checking Utils](https://quasar.dev/quasar-utils/type-checking-utils) [EventBus Util](https://quasar.dev/quasar-utils/event-bus-util) [Other Utils](https://quasar.dev/quasar-utils/other-utils) + +Why Donate? + +Quasar Framework is an MIT-licensed open-source project maintained by Razvan Stoenescu along with his Team and a community of open source contributors. We work on behalf of the community to create new features, fix bugs, and maintain Quasar so you can get on with your own development projects. We’re working to shape the future of the Vue.js ecosystem to write code once and simultaneously deploy it as a website (SPA/PWA/SSR), a Mobile App and/or an Electron App. + +Like most open source products, Quasar can’t do it alone. We rely on _sponsors, backers and supporters_ to keep things going. When Quasar starts to bring you some financial stability, please be considerate of the tens of thousands of hours that went into its creation and send some money back to the team that made it possible. And finally, if your company relies on Quasar, the best way to guarantee that Quasar continues to be there for you is to invest in its maintenance! + +## Our Manifesto + +The dream of open source is a noble cause, where communities grow and code is nurtured. In line with the philosophy of Free Open Source, Quasar has committed itself to the tenets of Good Labs’ [![](https://good-labs.github.io/greater-good-affirmation/assets/images/badge.svg)](https://good-labs.github.io/greater-good-affirmation). + +Quasar is and always will be free and open source, a self-managed place where everyone who abides by the community rules is invited and encouraged to participate. + +![](https://cdn.quasar.dev/img/what-do-we-sustain.png) + +### Participation is a Form of Collaborative Appreciation + +Many open source projects, like the Quasar Framework and Vue.js, have been developed by people who work on behalf of **their** community on their own time, with no demand for financial compensation. This “code ownership” is actually a very important issue because the owners decide how things are to be further developed. + +So who are these people? They are people, like you, in need of a certain feature and have found an open source solution, like Quasar. They are people who use the software and decided to contribute by helping to improve it. + +Possibly they are passionate about coding and want a project to occupy their talents. There are many reasons to get involved in a community around an open source project. But the majority have one thing in common: + +> They find free time in their busy schedules of jobs, families and commitments in order to participate because it makes them feel good to be part of something bigger than any one individual. + +To give you a bit of perspective, the lead developer and core-maintainer of Quasar, [Razvan Stoenescu](https://github.com/rstoenescu), has spent over 2000 hours during the development phases between 1.0.0-alpha.1 and 1.0.0-rc.1, during which time he logged more than 2000 commits and half of a million lines of code added. + +The rest of the team and all of the staff working the chat support lines and fixing code are still (as of June 2019) unpaid volunteers working uncountable hours. They are slowly becoming more and more responsible for units of the project and are an invaluable resource for the community that we must safeguard. + +### Financial Sponsorship to Guarantee Maintenance + +Nothing is certain, other than the fact that `node_modules` is still the heaviest thing in the universe and that at a certain point regular financial support of some kind is needed in order to guarantee the maintenance of large open-source projects. [Reference](https://github.com/sfosc/sfosc/issues/65#issuecomment-491770533). + +That point in time for Quasar is right now and your support will make the difference. + +![](https://cdn.quasar.dev/img/sustain-people-code.png) + +If your business relies on open source you can hedge the risk of it disappearing by financially supporting it so that you can rest assured that the software will continue to be available for you. + +As opposed to long-term licensing contracts for proprietary software, this model works because you encourage innovation, help to develop the next generation of developers and are implicitly empowered to participate in the discussion about features you need and issues you have found. + +If open source becomes financially viable for those developing the projects, more people will get involved. If these developers are able to earn enough to support themselves, they are more likely to stay involved. + +> Financial sustenance of open-source literally means that those who develop the project have an additional reason to stick around. + +Many promising open source projects become “abandonware” because the original developers ran out of steam. The maintenance phase is actually where many open-source projects go to die. Money is a great type of community feedback that says “Stick with it and continue to maintain this project! We need you!!!” + +### What You Get Out of It + +If you support open source, you become part of the community. It is a large community, but tends to be tightly knit. Your support shows you believe in the community, and that makes you a part of the family. If enough financial support comes together, it can also mean that core developers and maintainers are able to work on the project full-time rather than needing a job elsewhere. This in turn fosters an environment where they are able to process fixes and requests faster than if they were working on a “hobby” basis. + +So maybe you are a business who uses open source software to give themselves a competitive advantage, improve profits, or simply solve a problem other software doesn’t cover. Perhaps you’re an individual who uses an open source solution to the expensive corporate software you just can’t afford. Like [this](https://quasarframework.github.io/quasar-ui-qcalendar/docs). + +Or you recognize that the millions of lines of code are lines you don’t have to write and are simply appreciative of the effort. + +Whatever you use open source software for, think of those people who have spent long hours developing it and keeping it running for you. + +Even a small donation could mean a huge difference to them, not least because it means someone out there appreciates them enough to let them know. + +## Donating + +You can help Quasar Development by making a monthly pledge through Patreon or send a one-time donation through Paypal. If you are representing a company who wants to become a **Sponsor** and need an invoice for your donations, please send an email to `razvan.stoenescu [at] gmail [dot] com`. + +Donating through the **GitHub Sponsorship is recommended** because GitHub will also match your donation (making it worth double your amount). + +[GitHub Sponsorship](https://donate.quasar.dev/) + +Paypal (one time) + +![](https://www.paypalobjects.com/en_US/i/scr/pixel.gif) + +All donations are used for Quasar Development purposes exclusively. + +TIP + +For a full list of our wonderful people who make Quasar happen, visit the [Backers](https://github.com/quasarframework/quasar/blob/dev/backers.md) page. + +Ready for more? + +[Docs\\ +\\ +API Explorer](https://quasar.dev/api-explorer) + +* * * + +Caught a mistake? [Edit this page in browser](https://github.com/quasarframework/quasar/edit/dev/docs/src/pages/why-donate.md) + +1\. Introduction + +2\. Our Manifesto + +2.1. Participation is a Form of Collaborative Appreciation + +2.2. Financial Sponsorship to Guarantee Maintenance + +2.3. What You Get Out of It + +3\. Donating + +[MIT License](https://github.com/quasarframework/quasar/blob/dev/LICENSE) [Privacy Policy](https://www.iubenda.com/privacy-policy/40685560) + +Copyright © 2015-present PULSARDEV SRL, [Razvan Stoenescu](https://github.com/rstoenescu) + +This website has been designed in collaboration with [Dreamonkey Srl](https://www.dreamonkey.com/) + +Our third-party tools use cookies, which are necessary for its functioning and required to achieve the purposes illustrated in the cookie policy. + +AcceptLearn more + +## Icon Genie CLI +[_assignment\_late_\\ +\\ +Why donate](https://quasar.dev/why-donate) [_travel\_explore_\\ +\\ +API Explorer](https://quasar.dev/api-explorer) + +_code_ + +How to contribute + +[Contribution Guide](https://quasar.dev/how-to-contribute/contribution-guide) [Running Projects](https://quasar.dev/how-to-contribute/running-projects) [Start a New Project](https://quasar.dev/how-to-contribute/new-project) [Project Maintainer Role](https://quasar.dev/how-to-contribute/project-maintainer) [Commit Conventions](https://quasar.dev/how-to-contribute/commit-conventions) + +_tune_ + +Options & Helpers + +[The $q object](https://quasar.dev/options/the-q-object) [App Icons](https://quasar.dev/options/app-icons) [SEO](https://quasar.dev/options/seo) [Quasar Language Packs](https://quasar.dev/options/quasar-language-packs) [App Internationalization](https://quasar.dev/options/app-internationalization) [RTL Support](https://quasar.dev/options/rtl-support) [Installing Icon Libraries](https://quasar.dev/options/installing-icon-libraries) [Quasar Icon Sets](https://quasar.dev/options/quasar-icon-sets) [Platform Detection](https://quasar.dev/options/platform-detection) [Screen Plugin](https://quasar.dev/options/screen-plugin) [Animations](https://quasar.dev/options/animations) [Transitions](https://quasar.dev/options/transitions) + +_style_ + +Style & Identity + +[Typography](https://quasar.dev/style/typography) [Color Palette](https://quasar.dev/style/color-palette) [Theme Builder](https://quasar.dev/style/theme-builder) [Dark Mode](https://quasar.dev/style/dark-mode) [Spacing](https://quasar.dev/style/spacing) [Shadows](https://quasar.dev/style/shadows) [Breakpoints](https://quasar.dev/style/breakpoints) [Body classes](https://quasar.dev/style/body-classes) [Visibility](https://quasar.dev/style/visibility) [Positioning](https://quasar.dev/style/positioning) [Sass/SCSS Variables](https://quasar.dev/style/sass-scss-variables) [Other Helper Classes](https://quasar.dev/style/other-helper-classes) + +_view\_quilt_ + +Layout and Grid + +Flex Grid + +[Introduction to Flexbox](https://quasar.dev/layout/grid/introduction-to-flexbox) [Grid Row](https://quasar.dev/layout/grid/row) [Grid Column](https://quasar.dev/layout/grid/column) [Grid Gutter](https://quasar.dev/layout/grid/gutter) [Flexbox patterns](https://quasar.dev/layout/grid/flexbox-patterns) [Flex Playground](https://quasar.dev/layout/grid/flex-playground) + +[Layout](https://quasar.dev/layout/layout) [Routing with Layouts and Pages](https://quasar.dev/layout/routing-with-layouts-and-pages) [Layout Header and Footer](https://quasar.dev/layout/header-and-footer) [Layout Drawer](https://quasar.dev/layout/drawer) [Layout Page](https://quasar.dev/layout/page) [Layout Builder](https://quasar.dev/layout-builder) [Layout Gallery](https://quasar.dev/layout/gallery) [Page Sticky](https://quasar.dev/layout/page-sticky) [Page Scroller](https://quasar.dev/layout/page-scroller) + +_widgets_ + +Vue Components + +[Ajax Bar](https://quasar.dev/vue-components/ajax-bar) [Avatar](https://quasar.dev/vue-components/avatar) [Badge](https://quasar.dev/vue-components/badge) [Banner](https://quasar.dev/vue-components/banner) [Bar](https://quasar.dev/vue-components/bar) [Breadcrumbs](https://quasar.dev/vue-components/breadcrumbs) + +Buttons + +[Button](https://quasar.dev/vue-components/button) [Button Group](https://quasar.dev/vue-components/button-group) [Button Dropdown](https://quasar.dev/vue-components/button-dropdown) + +[Card](https://quasar.dev/vue-components/card) [Carousel](https://quasar.dev/vue-components/carousel) [Chat Message](https://quasar.dev/vue-components/chat) [Chip](https://quasar.dev/vue-components/chip) [Circular Progress](https://quasar.dev/vue-components/circular-progress) [Color Picker](https://quasar.dev/vue-components/color-picker) [Dialog](https://quasar.dev/vue-components/dialog) [Editor - WYSIWYG](https://quasar.dev/vue-components/editor) [Expansion Item](https://quasar.dev/vue-components/expansion-item) [Floating Action Button](https://quasar.dev/vue-components/floating-action-button) + +Form Components + +[Input Textfield](https://quasar.dev/vue-components/input) [Select](https://quasar.dev/vue-components/select) [File picker](https://quasar.dev/vue-components/file) [Form](https://quasar.dev/vue-components/form) [Field (wrapper)](https://quasar.dev/vue-components/field) [Radio](https://quasar.dev/vue-components/radio) [Checkbox](https://quasar.dev/vue-components/checkbox) [Toggle](https://quasar.dev/vue-components/toggle) [Button Toggle](https://quasar.dev/vue-components/button-toggle) [Option Group](https://quasar.dev/vue-components/option-group) [Slider](https://quasar.dev/vue-components/slider) [Range](https://quasar.dev/vue-components/range) [Time Picker](https://quasar.dev/vue-components/time) [Date Picker](https://quasar.dev/vue-components/date) + +[Icon](https://quasar.dev/vue-components/icon) [Img](https://quasar.dev/vue-components/img) [Infinite Scroll](https://quasar.dev/vue-components/infinite-scroll) [Inner Loading](https://quasar.dev/vue-components/inner-loading) [Intersection](https://quasar.dev/vue-components/intersection) [Knob](https://quasar.dev/vue-components/knob) [Linear Progress](https://quasar.dev/vue-components/linear-progress) [List & List Items](https://quasar.dev/vue-components/list-and-list-items) [Markup Table](https://quasar.dev/vue-components/markup-table) [Menu](https://quasar.dev/vue-components/menu) [No SSR](https://quasar.dev/vue-components/no-ssr) + +Observers + +[Resize Observer (for Element)](https://quasar.dev/vue-components/resize-observer) [Scroll Observer](https://quasar.dev/vue-components/scroll-observer) + +[Pagination](https://quasar.dev/vue-components/pagination) [Parallax](https://quasar.dev/vue-components/parallax) [Popup Edit](https://quasar.dev/vue-components/popup-edit) [Popup Proxy](https://quasar.dev/vue-components/popup-proxy) [Pull to refresh](https://quasar.dev/vue-components/pull-to-refresh) [Rating](https://quasar.dev/vue-components/rating) [Responsive](https://quasar.dev/vue-components/responsive) [Scroll Area](https://quasar.dev/vue-components/scroll-area) [Separator](https://quasar.dev/vue-components/separator) [Skeleton](https://quasar.dev/vue-components/skeleton) [Slide Item](https://quasar.dev/vue-components/slide-item) [Slide Transition](https://quasar.dev/vue-components/slide-transition) [Space](https://quasar.dev/vue-components/space) [Spinners](https://quasar.dev/vue-components/spinners) [Splitter](https://quasar.dev/vue-components/splitter) [Stepper](https://quasar.dev/vue-components/stepper) [Table](https://quasar.dev/vue-components/table) [Tabs](https://quasar.dev/vue-components/tabs) [Tab Panels](https://quasar.dev/vue-components/tab-panels) [Timeline](https://quasar.dev/vue-components/timeline) [Toolbar](https://quasar.dev/vue-components/toolbar) [Tooltip](https://quasar.dev/vue-components/tooltip) [Tree](https://quasar.dev/vue-components/tree) [Uploader](https://quasar.dev/vue-components/uploader) [Video](https://quasar.dev/vue-components/video) [Virtual Scroll](https://quasar.dev/vue-components/virtual-scroll) + +_swap\_calls_ + +Vue Directives + +[Close Popup](https://quasar.dev/vue-directives/close-popup) [Intersection](https://quasar.dev/vue-directives/intersection) [Material Ripples](https://quasar.dev/vue-directives/material-ripples) [Mutation](https://quasar.dev/vue-directives/mutation) [Morph](https://quasar.dev/vue-directives/morph) [Scroll](https://quasar.dev/vue-directives/scroll) [Scroll Fire](https://quasar.dev/vue-directives/scroll-fire) [Touch Hold](https://quasar.dev/vue-directives/touch-hold) [Touch Pan](https://quasar.dev/vue-directives/touch-pan) [Touch Repeat](https://quasar.dev/vue-directives/touch-repeat) [Touch Swipe](https://quasar.dev/vue-directives/touch-swipe) + +_extension_ + +Quasar Plugins + +[Addressbar Color](https://quasar.dev/quasar-plugins/addressbar-color) [App Fullscreen](https://quasar.dev/quasar-plugins/app-fullscreen) [App Visibility](https://quasar.dev/quasar-plugins/app-visibility) [Bottom Sheet](https://quasar.dev/quasar-plugins/bottom-sheet) [Cookies](https://quasar.dev/quasar-plugins/cookies) [Dark](https://quasar.dev/quasar-plugins/dark) [Dialog](https://quasar.dev/quasar-plugins/dialog) [Loading](https://quasar.dev/quasar-plugins/loading) [Loading Bar](https://quasar.dev/quasar-plugins/loading-bar) [Local/Session Storage](https://quasar.dev/quasar-plugins/web-storage) [Meta](https://quasar.dev/quasar-plugins/meta) [Notify](https://quasar.dev/quasar-plugins/notify) + +_developer\_mode_ + +Vue Composables + +[useQuasar](https://quasar.dev/vue-composables/use-quasar) [useDialogPluginComponent](https://quasar.dev/vue-composables/use-dialog-plugin-component) [useFormChild](https://quasar.dev/vue-composables/use-form-child) [useMeta](https://quasar.dev/vue-composables/use-meta) [useHydration\\ +\\ +new](https://quasar.dev/vue-composables/use-hydration) [useId\\ +\\ +new](https://quasar.dev/vue-composables/use-id) [useInterval\\ +\\ +new](https://quasar.dev/vue-composables/use-interval) [useRenderCache\\ +\\ +new](https://quasar.dev/vue-composables/use-render-cache) [useTick\\ +\\ +new](https://quasar.dev/vue-composables/use-tick) [useTimeout\\ +\\ +new](https://quasar.dev/vue-composables/use-timeout) [useSplitAttrs\\ +\\ +new](https://quasar.dev/vue-composables/use-split-attrs) + +_security_ + +Security + +[DO's and DON'Ts](https://quasar.dev/security/dos-and-donts) [Report a vulnerability](https://quasar.dev/security/report-a-vulnerability) + +_build_ + +Quasar CLI (with Vite) + +[Upgrade guide\\ +\\ +NEW!](https://quasar.dev/quasar-cli-vite/upgrade-guide) [The quasar.config file](https://quasar.dev/quasar-cli-vite/quasar-config-file) [Convert project to CLI with Vite](https://quasar.dev/quasar-cli-vite/convert-to-quasar-cli-with-vite) [Browser Compatibility](https://quasar.dev/quasar-cli-vite/browser-compatibility) [Supporting TypeScript](https://quasar.dev/quasar-cli-vite/supporting-ts) [Directory Structure](https://quasar.dev/quasar-cli-vite/directory-structure) [Commands List](https://quasar.dev/quasar-cli-vite/commands-list) [CSS Preprocessors](https://quasar.dev/quasar-cli-vite/css-preprocessors) [Routing](https://quasar.dev/quasar-cli-vite/routing) [Lazy Loading - Code Splitting](https://quasar.dev/quasar-cli-vite/lazy-loading) [Handling Assets](https://quasar.dev/quasar-cli-vite/handling-assets) [Boot Files](https://quasar.dev/quasar-cli-vite/boot-files) [Prefetch Feature](https://quasar.dev/quasar-cli-vite/prefetch-feature) [API Proxying](https://quasar.dev/quasar-cli-vite/api-proxying) [Handling Vite](https://quasar.dev/quasar-cli-vite/handling-vite) [Handling process.env](https://quasar.dev/quasar-cli-vite/handling-process-env) [State Management with Pinia](https://quasar.dev/quasar-cli-vite/state-management-with-pinia) [Linter](https://quasar.dev/quasar-cli-vite/linter) [Testing & Auditing](https://quasar.dev/quasar-cli-vite/testing-and-auditing) + +SPA mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-spa/introduction) [App Icons for SPA](https://quasar.dev/quasar-cli-vite/developing-spa/app-icons-spa) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-spa/build-commands) [Deploying](https://quasar.dev/quasar-cli-vite/developing-spa/deploying) + +SSR mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-ssr/introduction) [Writing Universal Code](https://quasar.dev/quasar-cli-vite/developing-ssr/writing-universal-code) [Preparation](https://quasar.dev/quasar-cli-vite/developing-ssr/preparation) [Configuring SSR](https://quasar.dev/quasar-cli-vite/developing-ssr/configuring-ssr) [ssrContext](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-context) [SSR Middleware](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-middleware) [SSR Webserver](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-webserver) [Vue SSR Directives](https://quasar.dev/quasar-cli-vite/developing-ssr/vue-ssr-directives) [App Icons for SSR](https://quasar.dev/quasar-cli-vite/developing-ssr/app-icons-ssr) [SEO for SSR](https://quasar.dev/quasar-cli-vite/developing-ssr/seo-for-ssr) [Client Side Hydration](https://quasar.dev/quasar-cli-vite/developing-ssr/client-side-hydration) [Handling 404 and 500 Errors](https://quasar.dev/quasar-cli-vite/developing-ssr/handling-404-and-500-errors) [SSR with PWA](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-with-pwa) [SSR FAQ](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-frequently-asked-questions) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-ssr/build-commands) [SSR with Typescript](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-with-typescript) [Deploying](https://quasar.dev/quasar-cli-vite/developing-ssr/deploying) + +PWA mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-pwa/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-pwa/preparation) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-pwa/build-commands) [Configuring PWA](https://quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa) [HMR for PWA](https://quasar.dev/quasar-cli-vite/developing-pwa/hmr-for-dev) [App Icons for PWA](https://quasar.dev/quasar-cli-vite/developing-pwa/app-icons-pwa) [Handling Service Worker](https://quasar.dev/quasar-cli-vite/developing-pwa/handling-service-worker) [PWA with Typescript](https://quasar.dev/quasar-cli-vite/developing-pwa/pwa-with-typescript) + +[Developing Mobile Apps](https://quasar.dev/quasar-cli-vite/developing-mobile-apps) + +Capacitor mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/preparation) [Capacitor versions](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/capacitor-version-support) [Configuring Capacitor](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/configuring-capacitor) [App Icons for Capacitor](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/app-icons-capacitor) [Capacitor API](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/capacitor-api) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/publishing-to-store) + +Cordova mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/preparation) [Configuring Cordova](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/configuring-cordova) [App Icons for Cordova](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/app-icons-cordova) [Cordova Plugins](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/cordova-plugins) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/publishing-to-store) + +Electron mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-electron-apps/introduction) [Upgrade guide](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-upgrade-guide) [Preparation](https://quasar.dev/quasar-cli-vite/developing-electron-apps/preparation) [Configuring Electron](https://quasar.dev/quasar-cli-vite/developing-electron-apps/configuring-electron) [App Icons for Electron](https://quasar.dev/quasar-cli-vite/developing-electron-apps/app-icons-electron) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-electron-apps/build-commands) [Preload Script](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-preload-script) [Electron Packages](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-packages) [Accessing files](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-accessing-files) [Frameless Electron Window](https://quasar.dev/quasar-cli-vite/developing-electron-apps/frameless-electron-window) [Electron with Typescript](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-with-typescript) [Electron Security Concerns](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-security-concerns) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-vite/developing-electron-apps/troubleshooting-and-tips) + +Browser Extensions mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/preparation) [Configuring BEX](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex) [App Icons for BEX](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/app-icons-browser-extension) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/build-commands) [Types of BEX](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/types-of-bex) [BEX Bridge Communication](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/bex-bridge) [Background Script](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/background-script) [Content Scripts](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/content-scripts) + +[Ajax Requests](https://quasar.dev/quasar-cli-vite/ajax-requests) [Opening Dev Server To Public](https://quasar.dev/quasar-cli-vite/opening-dev-server-to-public) + +_build_ + +Quasar CLI (with Webpack) + +[Upgrade guide\\ +\\ +NEW!](https://quasar.dev/quasar-cli-webpack/upgrade-guide) [The quasar.config file](https://quasar.dev/quasar-cli-webpack/quasar-config-file) [Convert to CLI with Webpack](https://quasar.dev/quasar-cli-webpack/convert-to-quasar-cli-with-webpack) [Browser Compatibility](https://quasar.dev/quasar-cli-webpack/browser-compatibility) [Supporting TypeScript](https://quasar.dev/quasar-cli-webpack/supporting-ts) [Directory Structure](https://quasar.dev/quasar-cli-webpack/directory-structure) [Commands List](https://quasar.dev/quasar-cli-webpack/commands-list) [CSS Preprocessors](https://quasar.dev/quasar-cli-webpack/css-preprocessors) [Routing](https://quasar.dev/quasar-cli-webpack/routing) [Lazy Loading - Code Splitting](https://quasar.dev/quasar-cli-webpack/lazy-loading) [Handling Assets](https://quasar.dev/quasar-cli-webpack/handling-assets) [Boot Files](https://quasar.dev/quasar-cli-webpack/boot-files) [Prefetch Feature](https://quasar.dev/quasar-cli-webpack/prefetch-feature) [API Proxying](https://quasar.dev/quasar-cli-webpack/api-proxying) [Handling Webpack](https://quasar.dev/quasar-cli-webpack/handling-webpack) [Handling process.env](https://quasar.dev/quasar-cli-webpack/handling-process-env) [State Management with Pinia](https://quasar.dev/quasar-cli-webpack/state-management-with-pinia) [Linter](https://quasar.dev/quasar-cli-webpack/linter) [Testing & Auditing](https://quasar.dev/quasar-cli-webpack/testing-and-auditing) + +SPA mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-spa/introduction) [App Icons for SPA](https://quasar.dev/quasar-cli-webpack/developing-spa/app-icons-spa) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-spa/build-commands) [Deploying](https://quasar.dev/quasar-cli-webpack/developing-spa/deploying) + +SSR mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-ssr/introduction) [Writing Universal Code](https://quasar.dev/quasar-cli-webpack/developing-ssr/writing-universal-code) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-ssr/preparation) [Configuring SSR](https://quasar.dev/quasar-cli-webpack/developing-ssr/configuring-ssr) [ssrContext](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-context) [SSR Middleware](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-middleware) [SSR Webserver](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-webserver) [Vue SSR Directives](https://quasar.dev/quasar-cli-webpack/developing-ssr/vue-ssr-directives) [App Icons for SSR](https://quasar.dev/quasar-cli-webpack/developing-ssr/app-icons-ssr) [SEO for SSR](https://quasar.dev/quasar-cli-webpack/developing-ssr/seo-for-ssr) [Client Side Hydration](https://quasar.dev/quasar-cli-webpack/developing-ssr/client-side-hydration) [Handling 404 and 500 Errors](https://quasar.dev/quasar-cli-webpack/developing-ssr/handling-404-and-500-errors) [SSR with PWA](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-with-pwa) [SSR FAQ](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-frequently-asked-questions) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-ssr/build-commands) [SSR with Typescript](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-with-typescript) [Deploying](https://quasar.dev/quasar-cli-webpack/developing-ssr/deploying) + +PWA mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-pwa/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-pwa/preparation) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-pwa/build-commands) [Configuring PWA](https://quasar.dev/quasar-cli-webpack/developing-pwa/configuring-pwa) [HMR for PWA](https://quasar.dev/quasar-cli-webpack/developing-pwa/hmr-for-dev) [App Icons for PWA](https://quasar.dev/quasar-cli-webpack/developing-pwa/app-icons-pwa) [Handling Service Worker](https://quasar.dev/quasar-cli-webpack/developing-pwa/handling-service-worker) [PWA with Typescript](https://quasar.dev/quasar-cli-webpack/developing-pwa/pwa-with-typescript) + +[Developing Mobile Apps](https://quasar.dev/quasar-cli-webpack/developing-mobile-apps) + +Capacitor mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/preparation) [Capacitor versions](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/capacitor-version-support) [Configuring Capacitor](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/configuring-capacitor) [App Icons for Capacitor](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/app-icons-capacitor) [Capacitor API](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/capacitor-api) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/publishing-to-store) + +Cordova mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/preparation) [Configuring Cordova](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/configuring-cordova) [App Icons for Cordova](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/app-icons-cordova) [Cordova Plugins](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/cordova-plugins) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/publishing-to-store) + +Electron mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/introduction) [Upgrade guide](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-upgrade-guide) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/preparation) [Configuring Electron](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/configuring-electron) [App Icons for Electron](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/app-icons-electron) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/build-commands) [Preload Script](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-preload-script) [Electron Packages](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-packages) [Accessing files](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-accessing-files) [Frameless Electron Window](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/frameless-electron-window) [Electron with Typescript](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-with-typescript) [Electron Security Concerns](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-security-concerns) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/troubleshooting-and-tips) + +Browser Extensions mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/preparation) [Configuring BEX](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/configuring-bex) [App Icons for BEX](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/app-icons-browser-extension) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/build-commands) [Types of BEX](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/types-of-bex) [BEX Bridge Communication](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/bex-bridge) [Background Script](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/background-script) [Content Scripts](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/content-scripts) + +[Ajax Requests](https://quasar.dev/quasar-cli-webpack/ajax-requests) [Opening Dev Server To Public](https://quasar.dev/quasar-cli-webpack/opening-dev-server-to-public) + +_stars_ + +Icon Genie CLI + +[Introduction](https://quasar.dev/icongenie/introduction) [Installation / Upgrade notes](https://quasar.dev/icongenie/installation) [Command list](https://quasar.dev/icongenie/command-list) [App Icons List](https://quasar.dev/icongenie/app-icons-list) [Profile files](https://quasar.dev/icongenie/profile-files) + +_note\_add_ + +App Extensions + +[Introduction](https://quasar.dev/app-extensions/introduction) [Discover App Extensions](https://quasar.dev/app-extensions/discover) + +Development Guide + +[Introduction](https://quasar.dev/app-extensions/development-guide/introduction) [Prompts API](https://quasar.dev/app-extensions/development-guide/prompts-api) [Install API](https://quasar.dev/app-extensions/development-guide/install-api) [Index API](https://quasar.dev/app-extensions/development-guide/index-api) [Uninstall API](https://quasar.dev/app-extensions/development-guide/uninstall-api) + +Tips and Tricks + +[Introduction](https://quasar.dev/app-extensions/tips-and-tricks/introduction) [Provide a UI component](https://quasar.dev/app-extensions/tips-and-tricks/provide-a-ui-component) [Provide a directive](https://quasar.dev/app-extensions/tips-and-tricks/provide-a-directive) [Inject Quasar Plugin](https://quasar.dev/app-extensions/tips-and-tricks/inject-quasar-plugin) [Starter kit equivalent](https://quasar.dev/app-extensions/tips-and-tricks/starter-kit-equivalent) [Chain Webpack](https://quasar.dev/app-extensions/tips-and-tricks/chain-webpack) + +_healing_ + +Quasar Utils + +[Date Utils](https://quasar.dev/quasar-utils/date-utils) [Color Utils](https://quasar.dev/quasar-utils/color-utils) [DOM Utils](https://quasar.dev/quasar-utils/dom-utils) [Morph Utils](https://quasar.dev/quasar-utils/morph-utils) [Formatter Utils](https://quasar.dev/quasar-utils/formatter-utils) [Scrolling Utils](https://quasar.dev/quasar-utils/scrolling-utils) [Type Checking Utils](https://quasar.dev/quasar-utils/type-checking-utils) [EventBus Util](https://quasar.dev/quasar-utils/event-bus-util) [Other Utils](https://quasar.dev/quasar-utils/other-utils) + +Icon Genie CLI + +You love the default Quasar logo, probably as much as the team does, but you just spent what feels like a lifetime making your own pixel-perfect representation of the soul of your application and now you want to replace that logo with your own! + +There are many different situations where your icon might be seen: in the browser tab, on the desktop, on the home screen of a mobile phone and even in an app store. Then there are splash screens to create in all the various device sizes and orientations. + +This means you need your logo in about 100+ different sizes with representative names, arcane formats, placed in the correct folders and probably some proper `` declarations for Cordova too. Even if you know exactly what you’re doing, this is a tedious and error-prone task. To make your life easy and care-free, we’ve built the Icon Genie CLI tool to make this exhausting process **dead simple**. + +![](https://cdn.quasar.dev/img/iconfactory.png) + +## How it helps you + +TIP + +We highly recommend using the Icon Genie CLI **for your Quasar CLI-generated projects** because it consumes a source icon and automatically clones, scales, minifies and places the icons and splash screens in the appropriate directories for you. When needed, it also tells you what tags you’ll need to add to your /index.html file. + +## Requirements + +This tool was built by the Quasar Team especially **with the Quasar CLI project structure in mind**. If you build your project folder with another CLI, you should explore Icon Genie [profile files](https://quasar.dev/icongenie/profile-files). + +Ready for more? + +[Quasar CLI (with Webpack)\\ +\\ +Opening Dev Server To Public](https://quasar.dev/quasar-cli-webpack/opening-dev-server-to-public) [Icon Genie CLI\\ +\\ +Installation / Upgrade notes](https://quasar.dev/icongenie/installation) + +* * * + +Caught a mistake? [Edit this page in browser](https://github.com/quasarframework/quasar/edit/dev/docs/src/pages/icongenie/introduction.md) + +1\. Introduction + +2\. How it helps you + +3\. Requirements + +[MIT License](https://github.com/quasarframework/quasar/blob/dev/LICENSE) [Privacy Policy](https://www.iubenda.com/privacy-policy/40685560) + +Copyright © 2015-present PULSARDEV SRL, [Razvan Stoenescu](https://github.com/rstoenescu) + +This website has been designed in collaboration with [Dreamonkey Srl](https://www.dreamonkey.com/) + +## Quasar Layout Builder +Pick Layout Parts + +Configure Layout Parts + +Play with Layout + +I want a QHeader + +I want a QFooter + +I want a left-side QDrawer + +I want a right-side QDrawer + +I want navigation tabs (requires QHeader) + +* * * + +Continue + +Export Layout + +## Quasar SEO Guide +[_assignment\_late_\\ +\\ +Why donate](https://quasar.dev/why-donate) [_travel\_explore_\\ +\\ +API Explorer](https://quasar.dev/api-explorer) + +_code_ + +How to contribute + +[Contribution Guide](https://quasar.dev/how-to-contribute/contribution-guide) [Running Projects](https://quasar.dev/how-to-contribute/running-projects) [Start a New Project](https://quasar.dev/how-to-contribute/new-project) [Project Maintainer Role](https://quasar.dev/how-to-contribute/project-maintainer) [Commit Conventions](https://quasar.dev/how-to-contribute/commit-conventions) + +_tune_ + +Options & Helpers + +[The $q object](https://quasar.dev/options/the-q-object) [App Icons](https://quasar.dev/options/app-icons) [SEO](https://quasar.dev/options/seo) [Quasar Language Packs](https://quasar.dev/options/quasar-language-packs) [App Internationalization](https://quasar.dev/options/app-internationalization) [RTL Support](https://quasar.dev/options/rtl-support) [Installing Icon Libraries](https://quasar.dev/options/installing-icon-libraries) [Quasar Icon Sets](https://quasar.dev/options/quasar-icon-sets) [Platform Detection](https://quasar.dev/options/platform-detection) [Screen Plugin](https://quasar.dev/options/screen-plugin) [Animations](https://quasar.dev/options/animations) [Transitions](https://quasar.dev/options/transitions) + +_style_ + +Style & Identity + +[Typography](https://quasar.dev/style/typography) [Color Palette](https://quasar.dev/style/color-palette) [Theme Builder](https://quasar.dev/style/theme-builder) [Dark Mode](https://quasar.dev/style/dark-mode) [Spacing](https://quasar.dev/style/spacing) [Shadows](https://quasar.dev/style/shadows) [Breakpoints](https://quasar.dev/style/breakpoints) [Body classes](https://quasar.dev/style/body-classes) [Visibility](https://quasar.dev/style/visibility) [Positioning](https://quasar.dev/style/positioning) [Sass/SCSS Variables](https://quasar.dev/style/sass-scss-variables) [Other Helper Classes](https://quasar.dev/style/other-helper-classes) + +_view\_quilt_ + +Layout and Grid + +Flex Grid + +[Introduction to Flexbox](https://quasar.dev/layout/grid/introduction-to-flexbox) [Grid Row](https://quasar.dev/layout/grid/row) [Grid Column](https://quasar.dev/layout/grid/column) [Grid Gutter](https://quasar.dev/layout/grid/gutter) [Flexbox patterns](https://quasar.dev/layout/grid/flexbox-patterns) [Flex Playground](https://quasar.dev/layout/grid/flex-playground) + +[Layout](https://quasar.dev/layout/layout) [Routing with Layouts and Pages](https://quasar.dev/layout/routing-with-layouts-and-pages) [Layout Header and Footer](https://quasar.dev/layout/header-and-footer) [Layout Drawer](https://quasar.dev/layout/drawer) [Layout Page](https://quasar.dev/layout/page) [Layout Builder](https://quasar.dev/layout-builder) [Layout Gallery](https://quasar.dev/layout/gallery) [Page Sticky](https://quasar.dev/layout/page-sticky) [Page Scroller](https://quasar.dev/layout/page-scroller) + +_widgets_ + +Vue Components + +[Ajax Bar](https://quasar.dev/vue-components/ajax-bar) [Avatar](https://quasar.dev/vue-components/avatar) [Badge](https://quasar.dev/vue-components/badge) [Banner](https://quasar.dev/vue-components/banner) [Bar](https://quasar.dev/vue-components/bar) [Breadcrumbs](https://quasar.dev/vue-components/breadcrumbs) + +Buttons + +[Button](https://quasar.dev/vue-components/button) [Button Group](https://quasar.dev/vue-components/button-group) [Button Dropdown](https://quasar.dev/vue-components/button-dropdown) + +[Card](https://quasar.dev/vue-components/card) [Carousel](https://quasar.dev/vue-components/carousel) [Chat Message](https://quasar.dev/vue-components/chat) [Chip](https://quasar.dev/vue-components/chip) [Circular Progress](https://quasar.dev/vue-components/circular-progress) [Color Picker](https://quasar.dev/vue-components/color-picker) [Dialog](https://quasar.dev/vue-components/dialog) [Editor - WYSIWYG](https://quasar.dev/vue-components/editor) [Expansion Item](https://quasar.dev/vue-components/expansion-item) [Floating Action Button](https://quasar.dev/vue-components/floating-action-button) + +Form Components + +[Input Textfield](https://quasar.dev/vue-components/input) [Select](https://quasar.dev/vue-components/select) [File picker](https://quasar.dev/vue-components/file) [Form](https://quasar.dev/vue-components/form) [Field (wrapper)](https://quasar.dev/vue-components/field) [Radio](https://quasar.dev/vue-components/radio) [Checkbox](https://quasar.dev/vue-components/checkbox) [Toggle](https://quasar.dev/vue-components/toggle) [Button Toggle](https://quasar.dev/vue-components/button-toggle) [Option Group](https://quasar.dev/vue-components/option-group) [Slider](https://quasar.dev/vue-components/slider) [Range](https://quasar.dev/vue-components/range) [Time Picker](https://quasar.dev/vue-components/time) [Date Picker](https://quasar.dev/vue-components/date) + +[Icon](https://quasar.dev/vue-components/icon) [Img](https://quasar.dev/vue-components/img) [Infinite Scroll](https://quasar.dev/vue-components/infinite-scroll) [Inner Loading](https://quasar.dev/vue-components/inner-loading) [Intersection](https://quasar.dev/vue-components/intersection) [Knob](https://quasar.dev/vue-components/knob) [Linear Progress](https://quasar.dev/vue-components/linear-progress) [List & List Items](https://quasar.dev/vue-components/list-and-list-items) [Markup Table](https://quasar.dev/vue-components/markup-table) [Menu](https://quasar.dev/vue-components/menu) [No SSR](https://quasar.dev/vue-components/no-ssr) + +Observers + +[Resize Observer (for Element)](https://quasar.dev/vue-components/resize-observer) [Scroll Observer](https://quasar.dev/vue-components/scroll-observer) + +[Pagination](https://quasar.dev/vue-components/pagination) [Parallax](https://quasar.dev/vue-components/parallax) [Popup Edit](https://quasar.dev/vue-components/popup-edit) [Popup Proxy](https://quasar.dev/vue-components/popup-proxy) [Pull to refresh](https://quasar.dev/vue-components/pull-to-refresh) [Rating](https://quasar.dev/vue-components/rating) [Responsive](https://quasar.dev/vue-components/responsive) [Scroll Area](https://quasar.dev/vue-components/scroll-area) [Separator](https://quasar.dev/vue-components/separator) [Skeleton](https://quasar.dev/vue-components/skeleton) [Slide Item](https://quasar.dev/vue-components/slide-item) [Slide Transition](https://quasar.dev/vue-components/slide-transition) [Space](https://quasar.dev/vue-components/space) [Spinners](https://quasar.dev/vue-components/spinners) [Splitter](https://quasar.dev/vue-components/splitter) [Stepper](https://quasar.dev/vue-components/stepper) [Table](https://quasar.dev/vue-components/table) [Tabs](https://quasar.dev/vue-components/tabs) [Tab Panels](https://quasar.dev/vue-components/tab-panels) [Timeline](https://quasar.dev/vue-components/timeline) [Toolbar](https://quasar.dev/vue-components/toolbar) [Tooltip](https://quasar.dev/vue-components/tooltip) [Tree](https://quasar.dev/vue-components/tree) [Uploader](https://quasar.dev/vue-components/uploader) [Video](https://quasar.dev/vue-components/video) [Virtual Scroll](https://quasar.dev/vue-components/virtual-scroll) + +_swap\_calls_ + +Vue Directives + +[Close Popup](https://quasar.dev/vue-directives/close-popup) [Intersection](https://quasar.dev/vue-directives/intersection) [Material Ripples](https://quasar.dev/vue-directives/material-ripples) [Mutation](https://quasar.dev/vue-directives/mutation) [Morph](https://quasar.dev/vue-directives/morph) [Scroll](https://quasar.dev/vue-directives/scroll) [Scroll Fire](https://quasar.dev/vue-directives/scroll-fire) [Touch Hold](https://quasar.dev/vue-directives/touch-hold) [Touch Pan](https://quasar.dev/vue-directives/touch-pan) [Touch Repeat](https://quasar.dev/vue-directives/touch-repeat) [Touch Swipe](https://quasar.dev/vue-directives/touch-swipe) + +_extension_ + +Quasar Plugins + +[Addressbar Color](https://quasar.dev/quasar-plugins/addressbar-color) [App Fullscreen](https://quasar.dev/quasar-plugins/app-fullscreen) [App Visibility](https://quasar.dev/quasar-plugins/app-visibility) [Bottom Sheet](https://quasar.dev/quasar-plugins/bottom-sheet) [Cookies](https://quasar.dev/quasar-plugins/cookies) [Dark](https://quasar.dev/quasar-plugins/dark) [Dialog](https://quasar.dev/quasar-plugins/dialog) [Loading](https://quasar.dev/quasar-plugins/loading) [Loading Bar](https://quasar.dev/quasar-plugins/loading-bar) [Local/Session Storage](https://quasar.dev/quasar-plugins/web-storage) [Meta](https://quasar.dev/quasar-plugins/meta) [Notify](https://quasar.dev/quasar-plugins/notify) + +_developer\_mode_ + +Vue Composables + +[useQuasar](https://quasar.dev/vue-composables/use-quasar) [useDialogPluginComponent](https://quasar.dev/vue-composables/use-dialog-plugin-component) [useFormChild](https://quasar.dev/vue-composables/use-form-child) [useMeta](https://quasar.dev/vue-composables/use-meta) [useHydration\\ +\\ +new](https://quasar.dev/vue-composables/use-hydration) [useId\\ +\\ +new](https://quasar.dev/vue-composables/use-id) [useInterval\\ +\\ +new](https://quasar.dev/vue-composables/use-interval) [useRenderCache\\ +\\ +new](https://quasar.dev/vue-composables/use-render-cache) [useTick\\ +\\ +new](https://quasar.dev/vue-composables/use-tick) [useTimeout\\ +\\ +new](https://quasar.dev/vue-composables/use-timeout) [useSplitAttrs\\ +\\ +new](https://quasar.dev/vue-composables/use-split-attrs) + +_security_ + +Security + +[DO's and DON'Ts](https://quasar.dev/security/dos-and-donts) [Report a vulnerability](https://quasar.dev/security/report-a-vulnerability) + +_build_ + +Quasar CLI (with Vite) + +[Upgrade guide\\ +\\ +NEW!](https://quasar.dev/quasar-cli-vite/upgrade-guide) [The quasar.config file](https://quasar.dev/quasar-cli-vite/quasar-config-file) [Convert project to CLI with Vite](https://quasar.dev/quasar-cli-vite/convert-to-quasar-cli-with-vite) [Browser Compatibility](https://quasar.dev/quasar-cli-vite/browser-compatibility) [Supporting TypeScript](https://quasar.dev/quasar-cli-vite/supporting-ts) [Directory Structure](https://quasar.dev/quasar-cli-vite/directory-structure) [Commands List](https://quasar.dev/quasar-cli-vite/commands-list) [CSS Preprocessors](https://quasar.dev/quasar-cli-vite/css-preprocessors) [Routing](https://quasar.dev/quasar-cli-vite/routing) [Lazy Loading - Code Splitting](https://quasar.dev/quasar-cli-vite/lazy-loading) [Handling Assets](https://quasar.dev/quasar-cli-vite/handling-assets) [Boot Files](https://quasar.dev/quasar-cli-vite/boot-files) [Prefetch Feature](https://quasar.dev/quasar-cli-vite/prefetch-feature) [API Proxying](https://quasar.dev/quasar-cli-vite/api-proxying) [Handling Vite](https://quasar.dev/quasar-cli-vite/handling-vite) [Handling process.env](https://quasar.dev/quasar-cli-vite/handling-process-env) [State Management with Pinia](https://quasar.dev/quasar-cli-vite/state-management-with-pinia) [Linter](https://quasar.dev/quasar-cli-vite/linter) [Testing & Auditing](https://quasar.dev/quasar-cli-vite/testing-and-auditing) + +SPA mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-spa/introduction) [App Icons for SPA](https://quasar.dev/quasar-cli-vite/developing-spa/app-icons-spa) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-spa/build-commands) [Deploying](https://quasar.dev/quasar-cli-vite/developing-spa/deploying) + +SSR mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-ssr/introduction) [Writing Universal Code](https://quasar.dev/quasar-cli-vite/developing-ssr/writing-universal-code) [Preparation](https://quasar.dev/quasar-cli-vite/developing-ssr/preparation) [Configuring SSR](https://quasar.dev/quasar-cli-vite/developing-ssr/configuring-ssr) [ssrContext](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-context) [SSR Middleware](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-middleware) [SSR Webserver](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-webserver) [Vue SSR Directives](https://quasar.dev/quasar-cli-vite/developing-ssr/vue-ssr-directives) [App Icons for SSR](https://quasar.dev/quasar-cli-vite/developing-ssr/app-icons-ssr) [SEO for SSR](https://quasar.dev/quasar-cli-vite/developing-ssr/seo-for-ssr) [Client Side Hydration](https://quasar.dev/quasar-cli-vite/developing-ssr/client-side-hydration) [Handling 404 and 500 Errors](https://quasar.dev/quasar-cli-vite/developing-ssr/handling-404-and-500-errors) [SSR with PWA](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-with-pwa) [SSR FAQ](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-frequently-asked-questions) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-ssr/build-commands) [SSR with Typescript](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-with-typescript) [Deploying](https://quasar.dev/quasar-cli-vite/developing-ssr/deploying) + +PWA mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-pwa/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-pwa/preparation) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-pwa/build-commands) [Configuring PWA](https://quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa) [HMR for PWA](https://quasar.dev/quasar-cli-vite/developing-pwa/hmr-for-dev) [App Icons for PWA](https://quasar.dev/quasar-cli-vite/developing-pwa/app-icons-pwa) [Handling Service Worker](https://quasar.dev/quasar-cli-vite/developing-pwa/handling-service-worker) [PWA with Typescript](https://quasar.dev/quasar-cli-vite/developing-pwa/pwa-with-typescript) + +[Developing Mobile Apps](https://quasar.dev/quasar-cli-vite/developing-mobile-apps) + +Capacitor mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/preparation) [Capacitor versions](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/capacitor-version-support) [Configuring Capacitor](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/configuring-capacitor) [App Icons for Capacitor](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/app-icons-capacitor) [Capacitor API](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/capacitor-api) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/publishing-to-store) + +Cordova mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/preparation) [Configuring Cordova](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/configuring-cordova) [App Icons for Cordova](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/app-icons-cordova) [Cordova Plugins](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/cordova-plugins) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/publishing-to-store) + +Electron mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-electron-apps/introduction) [Upgrade guide](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-upgrade-guide) [Preparation](https://quasar.dev/quasar-cli-vite/developing-electron-apps/preparation) [Configuring Electron](https://quasar.dev/quasar-cli-vite/developing-electron-apps/configuring-electron) [App Icons for Electron](https://quasar.dev/quasar-cli-vite/developing-electron-apps/app-icons-electron) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-electron-apps/build-commands) [Preload Script](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-preload-script) [Electron Packages](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-packages) [Accessing files](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-accessing-files) [Frameless Electron Window](https://quasar.dev/quasar-cli-vite/developing-electron-apps/frameless-electron-window) [Electron with Typescript](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-with-typescript) [Electron Security Concerns](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-security-concerns) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-vite/developing-electron-apps/troubleshooting-and-tips) + +Browser Extensions mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/preparation) [Configuring BEX](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex) [App Icons for BEX](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/app-icons-browser-extension) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/build-commands) [Types of BEX](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/types-of-bex) [BEX Bridge Communication](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/bex-bridge) [Background Script](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/background-script) [Content Scripts](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/content-scripts) + +[Ajax Requests](https://quasar.dev/quasar-cli-vite/ajax-requests) [Opening Dev Server To Public](https://quasar.dev/quasar-cli-vite/opening-dev-server-to-public) + +_build_ + +Quasar CLI (with Webpack) + +[Upgrade guide\\ +\\ +NEW!](https://quasar.dev/quasar-cli-webpack/upgrade-guide) [The quasar.config file](https://quasar.dev/quasar-cli-webpack/quasar-config-file) [Convert to CLI with Webpack](https://quasar.dev/quasar-cli-webpack/convert-to-quasar-cli-with-webpack) [Browser Compatibility](https://quasar.dev/quasar-cli-webpack/browser-compatibility) [Supporting TypeScript](https://quasar.dev/quasar-cli-webpack/supporting-ts) [Directory Structure](https://quasar.dev/quasar-cli-webpack/directory-structure) [Commands List](https://quasar.dev/quasar-cli-webpack/commands-list) [CSS Preprocessors](https://quasar.dev/quasar-cli-webpack/css-preprocessors) [Routing](https://quasar.dev/quasar-cli-webpack/routing) [Lazy Loading - Code Splitting](https://quasar.dev/quasar-cli-webpack/lazy-loading) [Handling Assets](https://quasar.dev/quasar-cli-webpack/handling-assets) [Boot Files](https://quasar.dev/quasar-cli-webpack/boot-files) [Prefetch Feature](https://quasar.dev/quasar-cli-webpack/prefetch-feature) [API Proxying](https://quasar.dev/quasar-cli-webpack/api-proxying) [Handling Webpack](https://quasar.dev/quasar-cli-webpack/handling-webpack) [Handling process.env](https://quasar.dev/quasar-cli-webpack/handling-process-env) [State Management with Pinia](https://quasar.dev/quasar-cli-webpack/state-management-with-pinia) [Linter](https://quasar.dev/quasar-cli-webpack/linter) [Testing & Auditing](https://quasar.dev/quasar-cli-webpack/testing-and-auditing) + +SPA mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-spa/introduction) [App Icons for SPA](https://quasar.dev/quasar-cli-webpack/developing-spa/app-icons-spa) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-spa/build-commands) [Deploying](https://quasar.dev/quasar-cli-webpack/developing-spa/deploying) + +SSR mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-ssr/introduction) [Writing Universal Code](https://quasar.dev/quasar-cli-webpack/developing-ssr/writing-universal-code) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-ssr/preparation) [Configuring SSR](https://quasar.dev/quasar-cli-webpack/developing-ssr/configuring-ssr) [ssrContext](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-context) [SSR Middleware](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-middleware) [SSR Webserver](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-webserver) [Vue SSR Directives](https://quasar.dev/quasar-cli-webpack/developing-ssr/vue-ssr-directives) [App Icons for SSR](https://quasar.dev/quasar-cli-webpack/developing-ssr/app-icons-ssr) [SEO for SSR](https://quasar.dev/quasar-cli-webpack/developing-ssr/seo-for-ssr) [Client Side Hydration](https://quasar.dev/quasar-cli-webpack/developing-ssr/client-side-hydration) [Handling 404 and 500 Errors](https://quasar.dev/quasar-cli-webpack/developing-ssr/handling-404-and-500-errors) [SSR with PWA](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-with-pwa) [SSR FAQ](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-frequently-asked-questions) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-ssr/build-commands) [SSR with Typescript](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-with-typescript) [Deploying](https://quasar.dev/quasar-cli-webpack/developing-ssr/deploying) + +PWA mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-pwa/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-pwa/preparation) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-pwa/build-commands) [Configuring PWA](https://quasar.dev/quasar-cli-webpack/developing-pwa/configuring-pwa) [HMR for PWA](https://quasar.dev/quasar-cli-webpack/developing-pwa/hmr-for-dev) [App Icons for PWA](https://quasar.dev/quasar-cli-webpack/developing-pwa/app-icons-pwa) [Handling Service Worker](https://quasar.dev/quasar-cli-webpack/developing-pwa/handling-service-worker) [PWA with Typescript](https://quasar.dev/quasar-cli-webpack/developing-pwa/pwa-with-typescript) + +[Developing Mobile Apps](https://quasar.dev/quasar-cli-webpack/developing-mobile-apps) + +Capacitor mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/preparation) [Capacitor versions](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/capacitor-version-support) [Configuring Capacitor](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/configuring-capacitor) [App Icons for Capacitor](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/app-icons-capacitor) [Capacitor API](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/capacitor-api) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/publishing-to-store) + +Cordova mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/preparation) [Configuring Cordova](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/configuring-cordova) [App Icons for Cordova](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/app-icons-cordova) [Cordova Plugins](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/cordova-plugins) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/publishing-to-store) + +Electron mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/introduction) [Upgrade guide](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-upgrade-guide) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/preparation) [Configuring Electron](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/configuring-electron) [App Icons for Electron](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/app-icons-electron) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/build-commands) [Preload Script](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-preload-script) [Electron Packages](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-packages) [Accessing files](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-accessing-files) [Frameless Electron Window](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/frameless-electron-window) [Electron with Typescript](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-with-typescript) [Electron Security Concerns](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-security-concerns) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/troubleshooting-and-tips) + +Browser Extensions mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/preparation) [Configuring BEX](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/configuring-bex) [App Icons for BEX](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/app-icons-browser-extension) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/build-commands) [Types of BEX](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/types-of-bex) [BEX Bridge Communication](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/bex-bridge) [Background Script](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/background-script) [Content Scripts](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/content-scripts) + +[Ajax Requests](https://quasar.dev/quasar-cli-webpack/ajax-requests) [Opening Dev Server To Public](https://quasar.dev/quasar-cli-webpack/opening-dev-server-to-public) + +_stars_ + +Icon Genie CLI + +[Introduction](https://quasar.dev/icongenie/introduction) [Installation / Upgrade notes](https://quasar.dev/icongenie/installation) [Command list](https://quasar.dev/icongenie/command-list) [App Icons List](https://quasar.dev/icongenie/app-icons-list) [Profile files](https://quasar.dev/icongenie/profile-files) + +_note\_add_ + +App Extensions + +[Introduction](https://quasar.dev/app-extensions/introduction) [Discover App Extensions](https://quasar.dev/app-extensions/discover) + +Development Guide + +[Introduction](https://quasar.dev/app-extensions/development-guide/introduction) [Prompts API](https://quasar.dev/app-extensions/development-guide/prompts-api) [Install API](https://quasar.dev/app-extensions/development-guide/install-api) [Index API](https://quasar.dev/app-extensions/development-guide/index-api) [Uninstall API](https://quasar.dev/app-extensions/development-guide/uninstall-api) + +Tips and Tricks + +[Introduction](https://quasar.dev/app-extensions/tips-and-tricks/introduction) [Provide a UI component](https://quasar.dev/app-extensions/tips-and-tricks/provide-a-ui-component) [Provide a directive](https://quasar.dev/app-extensions/tips-and-tricks/provide-a-directive) [Inject Quasar Plugin](https://quasar.dev/app-extensions/tips-and-tricks/inject-quasar-plugin) [Starter kit equivalent](https://quasar.dev/app-extensions/tips-and-tricks/starter-kit-equivalent) [Chain Webpack](https://quasar.dev/app-extensions/tips-and-tricks/chain-webpack) + +_healing_ + +Quasar Utils + +[Date Utils](https://quasar.dev/quasar-utils/date-utils) [Color Utils](https://quasar.dev/quasar-utils/color-utils) [DOM Utils](https://quasar.dev/quasar-utils/dom-utils) [Morph Utils](https://quasar.dev/quasar-utils/morph-utils) [Formatter Utils](https://quasar.dev/quasar-utils/formatter-utils) [Scrolling Utils](https://quasar.dev/quasar-utils/scrolling-utils) [Type Checking Utils](https://quasar.dev/quasar-utils/type-checking-utils) [EventBus Util](https://quasar.dev/quasar-utils/event-bus-util) [Other Utils](https://quasar.dev/quasar-utils/other-utils) + +SEO with Quasar + +The term SEO refers to Search Engine Optimization. And Quasar covers this aspect too through the [Quasar Meta Plugin](https://quasar.dev/quasar-plugins/meta). + +## Quasar Meta Plugin + +The [Quasar Meta Plugin](https://quasar.dev/quasar-plugins/meta) can dynamically change page title, manage `` tags, manage `` and `` DOM element attributes, add/remove/change ` +``` + +_content\_paste_ + +Copied to clipboard + +``` + + +``` + +_content\_paste_ + +Copied to clipboard + +## Adding Your Own Colors + +If you want to use your own colors for your components (let’s say we are adding a color named “brand”) all you need to do is add the following CSS into your app: + +```css +.text-brand { + color: #a2aa33 !important; +} +.bg-brand { + background: #a2aa33 !important; +} +``` + +_content\_paste_ + +Copied to clipboard + +Now we can use this color for Quasar components: + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +You can access a custom color value (hex string) in JS context with the [getPaletteColor](https://quasar.dev/quasar-utils/color-utils#helper-getpalettecolor) util. + +## Dynamic Change of Brand Colors (Dynamic Theme Colors) + +### How it works + +You can dynamically customize the brand colors during run-time: `primary`, `secondary`, `accent`, `dark`, `positive`, `negative`, `info`, `warning`. That means you can have one build of your application with a default color theme but show it with a runtime selected one. + +The main color configuration is done using CSS custom properties, stored on the root element ( `:root`). Each property has a name of `--q-${name}` (example: `--q-primary`, `--q-secondary`) and should have a valid CSS color as value. + +The CSS Custom properties use the same inheritance rules as normal CSS, so you can only redefine your desired colors and the rest will be inherited from the parent elements. + +The recommended workflow is to set your customized color properties on the `html` ( `document.documentElement`) or `body` ( `document.body`) elements. This will allow you to revert to the default color by just deleting your custom one. + +More info on CSS custom properties (variables) on [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables). + +### Util: setCssVar + +Quasar offers a helper function for setting Quasar CSS variables that can be used for the brand colors too: `setCssVar(colorName, colorValue[, element])` + +| Parameter | Type | Required | Description | +| --- | --- | --- | --- | +| `colorName` | String | _Yes_ | One of `primary`, `secondary`, `accent`, `dark`, `positive`, `negative`, `info`, `warning` | +| `colorValue` | String | _Yes_ | Valid CSS color value | +| `element` | Element | - | (Default: `document.body`) Element where the custom property will be set. | + +Example of setting brand colors using the helper: + +``` +import { setCssVar } from 'quasar' + +setCssVar('light', '#DDD') +setCssVar('primary', '#33F') +setCssVar('primary', '#F33', document.getElementById('rebranded-section-id')) +``` + +_content\_paste_ + +Copied to clipboard + +Example of setting brand colors using vanilla JavaScript: + +``` +// equivalent of setCssVar('primary') in raw JavaScript: +document.body.style.setProperty('--q-primary', '#0273d4') +``` + +_content\_paste_ + +Copied to clipboard + +### Util: getCssVar + +Quasar offers a helper function for getting the value of Quasar CSS variables that can be used for brand colors too: `getCssVar(colorName[, element])` + +| Parameter | Type | Required | Description | +| --- | --- | --- | --- | +| `colorName` | String | _Yes_ | One of `primary`, `secondary`, `accent`, `dark`, `positive`, `negative`, `info`, `warning` | +| `element` | Element | - | (Default: `document.body`) Element where the custom property will be read. | + +Example of getting brand colors using the helper: + +``` +import { getCssVar } from 'quasar' + +getCssVar('primary') // '#33F' +getCssVar('primary', document.getElementById('rebranded-section-id')) +``` + +_content\_paste_ + +Copied to clipboard + +What this helper does is wrap the raw JavaScript `getPropertyValue()` and it’s available for convenience. Here is an example of equivalent vanilla JavaScript: + +``` +// equivalent of getCssVar('primary') in raw JavaScript: +getComputedStyle(document.documentElement) + .getPropertyValue('--q-primary') // #0273d4 +``` + +_content\_paste_ + +Copied to clipboard + +### More color utils + +Besides the utils above, we also have a dedicated section in docs for handling colors that you might be interested in: [Color utils](https://quasar.dev/quasar-utils/color-utils). + +``` +import { colors, setCssVar } from 'quasar' + +const { lighten } = colors + +const newPrimaryColor = '#933' +setCssVar('primary', newPrimaryColor) +setCssVar('primary-darkened', lighten(newPrimaryColor, -10)) +``` + +_content\_paste_ + +Copied to clipboard + +## Setting Up Defaults + +You can set up some brand colors without tampering with the Sass/SCSS variables. + +See the [Configuration](https://quasar.dev/style/color-palette#configuration) section above for setting it during initial configuration for Quasar CLI, Quasar Vite plugin, and UMD projects. + +If you are using Quasar CLI, you can also use a [@quasar/app-vite Boot File](https://quasar.dev/quasar-cli-vite/boot-files) or a [@quasar/app-webpack Boot File](https://quasar.dev/quasar-cli-webpack/boot-files). This is especially useful if you want to change the colors dynamically at initial load time, perhaps after fetching them from an API. + +/src/boot/brand-colors.js - or any other name + +* * * + +``` +import { setCssVar } from 'quasar' +import { defineBoot } from '#q-app/wrappers' + +export default defineBoot(() => { + setCssVar('primary', '#ff0000') +}) +``` + +_content\_paste_ + +Copied to clipboard + +If using SSR mode, disable this boot file when running on server-side: + +/quasar.config file + +* * * + +``` +boot: [\ + { server: false, path: 'brand-colors' }, // or the name you gave it\ + // ...\ +], +``` + +_content\_paste_ + +Copied to clipboard + +Ready for more? + +[Style & Identity\\ +\\ +Typography](https://quasar.dev/style/typography) [Style & Identity\\ +\\ +Theme Builder](https://quasar.dev/style/theme-builder) + +* * * + +Caught a mistake? [Edit this page in browser](https://github.com/quasarframework/quasar/edit/dev/docs/src/pages/style/color-palette/color-palette.md) + +1\. Introduction + +2\. Brand API + +3\. Configuration + +4\. Brand Colors + +5\. Color List + +6\. Using as CSS Classes + +7\. Using Sass/SCSS Variables + +8\. Adding Your Own Colors + +9\. Dynamic Change of Brand Colors (Dynamic Theme Colors) + +9.1. How it works + +9.2. Util: setCssVar + +9.3. Util: getCssVar + +9.4. More color utils + +10\. Setting Up Defaults + +[MIT License](https://github.com/quasarframework/quasar/blob/dev/LICENSE) [Privacy Policy](https://www.iubenda.com/privacy-policy/40685560) + +Copyright © 2015-present PULSARDEV SRL, [Razvan Stoenescu](https://github.com/rstoenescu) + +This website has been designed in collaboration with [Dreamonkey Srl](https://www.dreamonkey.com/) + +Our third-party tools use cookies, which are necessary for its functioning and required to achieve the purposes illustrated in the cookie policy. + +AcceptLearn more + +## Vue Skeleton Component +[_assignment\_late_\\ +\\ +Why donate](https://quasar.dev/why-donate) [_travel\_explore_\\ +\\ +API Explorer](https://quasar.dev/api-explorer) + +_code_ + +How to contribute + +[Contribution Guide](https://quasar.dev/how-to-contribute/contribution-guide) [Running Projects](https://quasar.dev/how-to-contribute/running-projects) [Start a New Project](https://quasar.dev/how-to-contribute/new-project) [Project Maintainer Role](https://quasar.dev/how-to-contribute/project-maintainer) [Commit Conventions](https://quasar.dev/how-to-contribute/commit-conventions) + +_tune_ + +Options & Helpers + +[The $q object](https://quasar.dev/options/the-q-object) [App Icons](https://quasar.dev/options/app-icons) [SEO](https://quasar.dev/options/seo) [Quasar Language Packs](https://quasar.dev/options/quasar-language-packs) [App Internationalization](https://quasar.dev/options/app-internationalization) [RTL Support](https://quasar.dev/options/rtl-support) [Installing Icon Libraries](https://quasar.dev/options/installing-icon-libraries) [Quasar Icon Sets](https://quasar.dev/options/quasar-icon-sets) [Platform Detection](https://quasar.dev/options/platform-detection) [Screen Plugin](https://quasar.dev/options/screen-plugin) [Animations](https://quasar.dev/options/animations) [Transitions](https://quasar.dev/options/transitions) + +_style_ + +Style & Identity + +[Typography](https://quasar.dev/style/typography) [Color Palette](https://quasar.dev/style/color-palette) [Theme Builder](https://quasar.dev/style/theme-builder) [Dark Mode](https://quasar.dev/style/dark-mode) [Spacing](https://quasar.dev/style/spacing) [Shadows](https://quasar.dev/style/shadows) [Breakpoints](https://quasar.dev/style/breakpoints) [Body classes](https://quasar.dev/style/body-classes) [Visibility](https://quasar.dev/style/visibility) [Positioning](https://quasar.dev/style/positioning) [Sass/SCSS Variables](https://quasar.dev/style/sass-scss-variables) [Other Helper Classes](https://quasar.dev/style/other-helper-classes) + +_view\_quilt_ + +Layout and Grid + +Flex Grid + +[Introduction to Flexbox](https://quasar.dev/layout/grid/introduction-to-flexbox) [Grid Row](https://quasar.dev/layout/grid/row) [Grid Column](https://quasar.dev/layout/grid/column) [Grid Gutter](https://quasar.dev/layout/grid/gutter) [Flexbox patterns](https://quasar.dev/layout/grid/flexbox-patterns) [Flex Playground](https://quasar.dev/layout/grid/flex-playground) + +[Layout](https://quasar.dev/layout/layout) [Routing with Layouts and Pages](https://quasar.dev/layout/routing-with-layouts-and-pages) [Layout Header and Footer](https://quasar.dev/layout/header-and-footer) [Layout Drawer](https://quasar.dev/layout/drawer) [Layout Page](https://quasar.dev/layout/page) [Layout Builder](https://quasar.dev/layout-builder) [Layout Gallery](https://quasar.dev/layout/gallery) [Page Sticky](https://quasar.dev/layout/page-sticky) [Page Scroller](https://quasar.dev/layout/page-scroller) + +_widgets_ + +Vue Components + +[Ajax Bar](https://quasar.dev/vue-components/ajax-bar) [Avatar](https://quasar.dev/vue-components/avatar) [Badge](https://quasar.dev/vue-components/badge) [Banner](https://quasar.dev/vue-components/banner) [Bar](https://quasar.dev/vue-components/bar) [Breadcrumbs](https://quasar.dev/vue-components/breadcrumbs) + +Buttons + +[Button](https://quasar.dev/vue-components/button) [Button Group](https://quasar.dev/vue-components/button-group) [Button Dropdown](https://quasar.dev/vue-components/button-dropdown) + +[Card](https://quasar.dev/vue-components/card) [Carousel](https://quasar.dev/vue-components/carousel) [Chat Message](https://quasar.dev/vue-components/chat) [Chip](https://quasar.dev/vue-components/chip) [Circular Progress](https://quasar.dev/vue-components/circular-progress) [Color Picker](https://quasar.dev/vue-components/color-picker) [Dialog](https://quasar.dev/vue-components/dialog) [Editor - WYSIWYG](https://quasar.dev/vue-components/editor) [Expansion Item](https://quasar.dev/vue-components/expansion-item) [Floating Action Button](https://quasar.dev/vue-components/floating-action-button) + +Form Components + +[Input Textfield](https://quasar.dev/vue-components/input) [Select](https://quasar.dev/vue-components/select) [File picker](https://quasar.dev/vue-components/file) [Form](https://quasar.dev/vue-components/form) [Field (wrapper)](https://quasar.dev/vue-components/field) [Radio](https://quasar.dev/vue-components/radio) [Checkbox](https://quasar.dev/vue-components/checkbox) [Toggle](https://quasar.dev/vue-components/toggle) [Button Toggle](https://quasar.dev/vue-components/button-toggle) [Option Group](https://quasar.dev/vue-components/option-group) [Slider](https://quasar.dev/vue-components/slider) [Range](https://quasar.dev/vue-components/range) [Time Picker](https://quasar.dev/vue-components/time) [Date Picker](https://quasar.dev/vue-components/date) + +[Icon](https://quasar.dev/vue-components/icon) [Img](https://quasar.dev/vue-components/img) [Infinite Scroll](https://quasar.dev/vue-components/infinite-scroll) [Inner Loading](https://quasar.dev/vue-components/inner-loading) [Intersection](https://quasar.dev/vue-components/intersection) [Knob](https://quasar.dev/vue-components/knob) [Linear Progress](https://quasar.dev/vue-components/linear-progress) [List & List Items](https://quasar.dev/vue-components/list-and-list-items) [Markup Table](https://quasar.dev/vue-components/markup-table) [Menu](https://quasar.dev/vue-components/menu) [No SSR](https://quasar.dev/vue-components/no-ssr) + +Observers + +[Resize Observer (for Element)](https://quasar.dev/vue-components/resize-observer) [Scroll Observer](https://quasar.dev/vue-components/scroll-observer) + +[Pagination](https://quasar.dev/vue-components/pagination) [Parallax](https://quasar.dev/vue-components/parallax) [Popup Edit](https://quasar.dev/vue-components/popup-edit) [Popup Proxy](https://quasar.dev/vue-components/popup-proxy) [Pull to refresh](https://quasar.dev/vue-components/pull-to-refresh) [Rating](https://quasar.dev/vue-components/rating) [Responsive](https://quasar.dev/vue-components/responsive) [Scroll Area](https://quasar.dev/vue-components/scroll-area) [Separator](https://quasar.dev/vue-components/separator) [Skeleton](https://quasar.dev/vue-components/skeleton) [Slide Item](https://quasar.dev/vue-components/slide-item) [Slide Transition](https://quasar.dev/vue-components/slide-transition) [Space](https://quasar.dev/vue-components/space) [Spinners](https://quasar.dev/vue-components/spinners) [Splitter](https://quasar.dev/vue-components/splitter) [Stepper](https://quasar.dev/vue-components/stepper) [Table](https://quasar.dev/vue-components/table) [Tabs](https://quasar.dev/vue-components/tabs) [Tab Panels](https://quasar.dev/vue-components/tab-panels) [Timeline](https://quasar.dev/vue-components/timeline) [Toolbar](https://quasar.dev/vue-components/toolbar) [Tooltip](https://quasar.dev/vue-components/tooltip) [Tree](https://quasar.dev/vue-components/tree) [Uploader](https://quasar.dev/vue-components/uploader) [Video](https://quasar.dev/vue-components/video) [Virtual Scroll](https://quasar.dev/vue-components/virtual-scroll) + +_swap\_calls_ + +Vue Directives + +[Close Popup](https://quasar.dev/vue-directives/close-popup) [Intersection](https://quasar.dev/vue-directives/intersection) [Material Ripples](https://quasar.dev/vue-directives/material-ripples) [Mutation](https://quasar.dev/vue-directives/mutation) [Morph](https://quasar.dev/vue-directives/morph) [Scroll](https://quasar.dev/vue-directives/scroll) [Scroll Fire](https://quasar.dev/vue-directives/scroll-fire) [Touch Hold](https://quasar.dev/vue-directives/touch-hold) [Touch Pan](https://quasar.dev/vue-directives/touch-pan) [Touch Repeat](https://quasar.dev/vue-directives/touch-repeat) [Touch Swipe](https://quasar.dev/vue-directives/touch-swipe) + +_extension_ + +Quasar Plugins + +[Addressbar Color](https://quasar.dev/quasar-plugins/addressbar-color) [App Fullscreen](https://quasar.dev/quasar-plugins/app-fullscreen) [App Visibility](https://quasar.dev/quasar-plugins/app-visibility) [Bottom Sheet](https://quasar.dev/quasar-plugins/bottom-sheet) [Cookies](https://quasar.dev/quasar-plugins/cookies) [Dark](https://quasar.dev/quasar-plugins/dark) [Dialog](https://quasar.dev/quasar-plugins/dialog) [Loading](https://quasar.dev/quasar-plugins/loading) [Loading Bar](https://quasar.dev/quasar-plugins/loading-bar) [Local/Session Storage](https://quasar.dev/quasar-plugins/web-storage) [Meta](https://quasar.dev/quasar-plugins/meta) [Notify](https://quasar.dev/quasar-plugins/notify) + +_developer\_mode_ + +Vue Composables + +[useQuasar](https://quasar.dev/vue-composables/use-quasar) [useDialogPluginComponent](https://quasar.dev/vue-composables/use-dialog-plugin-component) [useFormChild](https://quasar.dev/vue-composables/use-form-child) [useMeta](https://quasar.dev/vue-composables/use-meta) [useHydration\\ +\\ +new](https://quasar.dev/vue-composables/use-hydration) [useId\\ +\\ +new](https://quasar.dev/vue-composables/use-id) [useInterval\\ +\\ +new](https://quasar.dev/vue-composables/use-interval) [useRenderCache\\ +\\ +new](https://quasar.dev/vue-composables/use-render-cache) [useTick\\ +\\ +new](https://quasar.dev/vue-composables/use-tick) [useTimeout\\ +\\ +new](https://quasar.dev/vue-composables/use-timeout) [useSplitAttrs\\ +\\ +new](https://quasar.dev/vue-composables/use-split-attrs) + +_security_ + +Security + +[DO's and DON'Ts](https://quasar.dev/security/dos-and-donts) [Report a vulnerability](https://quasar.dev/security/report-a-vulnerability) + +_build_ + +Quasar CLI (with Vite) + +[Upgrade guide\\ +\\ +NEW!](https://quasar.dev/quasar-cli-vite/upgrade-guide) [The quasar.config file](https://quasar.dev/quasar-cli-vite/quasar-config-file) [Convert project to CLI with Vite](https://quasar.dev/quasar-cli-vite/convert-to-quasar-cli-with-vite) [Browser Compatibility](https://quasar.dev/quasar-cli-vite/browser-compatibility) [Supporting TypeScript](https://quasar.dev/quasar-cli-vite/supporting-ts) [Directory Structure](https://quasar.dev/quasar-cli-vite/directory-structure) [Commands List](https://quasar.dev/quasar-cli-vite/commands-list) [CSS Preprocessors](https://quasar.dev/quasar-cli-vite/css-preprocessors) [Routing](https://quasar.dev/quasar-cli-vite/routing) [Lazy Loading - Code Splitting](https://quasar.dev/quasar-cli-vite/lazy-loading) [Handling Assets](https://quasar.dev/quasar-cli-vite/handling-assets) [Boot Files](https://quasar.dev/quasar-cli-vite/boot-files) [Prefetch Feature](https://quasar.dev/quasar-cli-vite/prefetch-feature) [API Proxying](https://quasar.dev/quasar-cli-vite/api-proxying) [Handling Vite](https://quasar.dev/quasar-cli-vite/handling-vite) [Handling process.env](https://quasar.dev/quasar-cli-vite/handling-process-env) [State Management with Pinia](https://quasar.dev/quasar-cli-vite/state-management-with-pinia) [Linter](https://quasar.dev/quasar-cli-vite/linter) [Testing & Auditing](https://quasar.dev/quasar-cli-vite/testing-and-auditing) + +SPA mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-spa/introduction) [App Icons for SPA](https://quasar.dev/quasar-cli-vite/developing-spa/app-icons-spa) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-spa/build-commands) [Deploying](https://quasar.dev/quasar-cli-vite/developing-spa/deploying) + +SSR mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-ssr/introduction) [Writing Universal Code](https://quasar.dev/quasar-cli-vite/developing-ssr/writing-universal-code) [Preparation](https://quasar.dev/quasar-cli-vite/developing-ssr/preparation) [Configuring SSR](https://quasar.dev/quasar-cli-vite/developing-ssr/configuring-ssr) [ssrContext](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-context) [SSR Middleware](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-middleware) [SSR Webserver](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-webserver) [Vue SSR Directives](https://quasar.dev/quasar-cli-vite/developing-ssr/vue-ssr-directives) [App Icons for SSR](https://quasar.dev/quasar-cli-vite/developing-ssr/app-icons-ssr) [SEO for SSR](https://quasar.dev/quasar-cli-vite/developing-ssr/seo-for-ssr) [Client Side Hydration](https://quasar.dev/quasar-cli-vite/developing-ssr/client-side-hydration) [Handling 404 and 500 Errors](https://quasar.dev/quasar-cli-vite/developing-ssr/handling-404-and-500-errors) [SSR with PWA](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-with-pwa) [SSR FAQ](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-frequently-asked-questions) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-ssr/build-commands) [SSR with Typescript](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-with-typescript) [Deploying](https://quasar.dev/quasar-cli-vite/developing-ssr/deploying) + +PWA mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-pwa/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-pwa/preparation) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-pwa/build-commands) [Configuring PWA](https://quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa) [HMR for PWA](https://quasar.dev/quasar-cli-vite/developing-pwa/hmr-for-dev) [App Icons for PWA](https://quasar.dev/quasar-cli-vite/developing-pwa/app-icons-pwa) [Handling Service Worker](https://quasar.dev/quasar-cli-vite/developing-pwa/handling-service-worker) [PWA with Typescript](https://quasar.dev/quasar-cli-vite/developing-pwa/pwa-with-typescript) + +[Developing Mobile Apps](https://quasar.dev/quasar-cli-vite/developing-mobile-apps) + +Capacitor mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/preparation) [Capacitor versions](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/capacitor-version-support) [Configuring Capacitor](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/configuring-capacitor) [App Icons for Capacitor](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/app-icons-capacitor) [Capacitor API](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/capacitor-api) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/publishing-to-store) + +Cordova mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/preparation) [Configuring Cordova](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/configuring-cordova) [App Icons for Cordova](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/app-icons-cordova) [Cordova Plugins](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/cordova-plugins) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/publishing-to-store) + +Electron mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-electron-apps/introduction) [Upgrade guide](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-upgrade-guide) [Preparation](https://quasar.dev/quasar-cli-vite/developing-electron-apps/preparation) [Configuring Electron](https://quasar.dev/quasar-cli-vite/developing-electron-apps/configuring-electron) [App Icons for Electron](https://quasar.dev/quasar-cli-vite/developing-electron-apps/app-icons-electron) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-electron-apps/build-commands) [Preload Script](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-preload-script) [Electron Packages](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-packages) [Accessing files](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-accessing-files) [Frameless Electron Window](https://quasar.dev/quasar-cli-vite/developing-electron-apps/frameless-electron-window) [Electron with Typescript](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-with-typescript) [Electron Security Concerns](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-security-concerns) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-vite/developing-electron-apps/troubleshooting-and-tips) + +Browser Extensions mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/preparation) [Configuring BEX](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex) [App Icons for BEX](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/app-icons-browser-extension) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/build-commands) [Types of BEX](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/types-of-bex) [BEX Bridge Communication](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/bex-bridge) [Background Script](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/background-script) [Content Scripts](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/content-scripts) + +[Ajax Requests](https://quasar.dev/quasar-cli-vite/ajax-requests) [Opening Dev Server To Public](https://quasar.dev/quasar-cli-vite/opening-dev-server-to-public) + +_build_ + +Quasar CLI (with Webpack) + +[Upgrade guide\\ +\\ +NEW!](https://quasar.dev/quasar-cli-webpack/upgrade-guide) [The quasar.config file](https://quasar.dev/quasar-cli-webpack/quasar-config-file) [Convert to CLI with Webpack](https://quasar.dev/quasar-cli-webpack/convert-to-quasar-cli-with-webpack) [Browser Compatibility](https://quasar.dev/quasar-cli-webpack/browser-compatibility) [Supporting TypeScript](https://quasar.dev/quasar-cli-webpack/supporting-ts) [Directory Structure](https://quasar.dev/quasar-cli-webpack/directory-structure) [Commands List](https://quasar.dev/quasar-cli-webpack/commands-list) [CSS Preprocessors](https://quasar.dev/quasar-cli-webpack/css-preprocessors) [Routing](https://quasar.dev/quasar-cli-webpack/routing) [Lazy Loading - Code Splitting](https://quasar.dev/quasar-cli-webpack/lazy-loading) [Handling Assets](https://quasar.dev/quasar-cli-webpack/handling-assets) [Boot Files](https://quasar.dev/quasar-cli-webpack/boot-files) [Prefetch Feature](https://quasar.dev/quasar-cli-webpack/prefetch-feature) [API Proxying](https://quasar.dev/quasar-cli-webpack/api-proxying) [Handling Webpack](https://quasar.dev/quasar-cli-webpack/handling-webpack) [Handling process.env](https://quasar.dev/quasar-cli-webpack/handling-process-env) [State Management with Pinia](https://quasar.dev/quasar-cli-webpack/state-management-with-pinia) [Linter](https://quasar.dev/quasar-cli-webpack/linter) [Testing & Auditing](https://quasar.dev/quasar-cli-webpack/testing-and-auditing) + +SPA mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-spa/introduction) [App Icons for SPA](https://quasar.dev/quasar-cli-webpack/developing-spa/app-icons-spa) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-spa/build-commands) [Deploying](https://quasar.dev/quasar-cli-webpack/developing-spa/deploying) + +SSR mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-ssr/introduction) [Writing Universal Code](https://quasar.dev/quasar-cli-webpack/developing-ssr/writing-universal-code) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-ssr/preparation) [Configuring SSR](https://quasar.dev/quasar-cli-webpack/developing-ssr/configuring-ssr) [ssrContext](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-context) [SSR Middleware](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-middleware) [SSR Webserver](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-webserver) [Vue SSR Directives](https://quasar.dev/quasar-cli-webpack/developing-ssr/vue-ssr-directives) [App Icons for SSR](https://quasar.dev/quasar-cli-webpack/developing-ssr/app-icons-ssr) [SEO for SSR](https://quasar.dev/quasar-cli-webpack/developing-ssr/seo-for-ssr) [Client Side Hydration](https://quasar.dev/quasar-cli-webpack/developing-ssr/client-side-hydration) [Handling 404 and 500 Errors](https://quasar.dev/quasar-cli-webpack/developing-ssr/handling-404-and-500-errors) [SSR with PWA](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-with-pwa) [SSR FAQ](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-frequently-asked-questions) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-ssr/build-commands) [SSR with Typescript](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-with-typescript) [Deploying](https://quasar.dev/quasar-cli-webpack/developing-ssr/deploying) + +PWA mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-pwa/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-pwa/preparation) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-pwa/build-commands) [Configuring PWA](https://quasar.dev/quasar-cli-webpack/developing-pwa/configuring-pwa) [HMR for PWA](https://quasar.dev/quasar-cli-webpack/developing-pwa/hmr-for-dev) [App Icons for PWA](https://quasar.dev/quasar-cli-webpack/developing-pwa/app-icons-pwa) [Handling Service Worker](https://quasar.dev/quasar-cli-webpack/developing-pwa/handling-service-worker) [PWA with Typescript](https://quasar.dev/quasar-cli-webpack/developing-pwa/pwa-with-typescript) + +[Developing Mobile Apps](https://quasar.dev/quasar-cli-webpack/developing-mobile-apps) + +Capacitor mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/preparation) [Capacitor versions](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/capacitor-version-support) [Configuring Capacitor](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/configuring-capacitor) [App Icons for Capacitor](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/app-icons-capacitor) [Capacitor API](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/capacitor-api) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/publishing-to-store) + +Cordova mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/preparation) [Configuring Cordova](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/configuring-cordova) [App Icons for Cordova](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/app-icons-cordova) [Cordova Plugins](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/cordova-plugins) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/publishing-to-store) + +Electron mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/introduction) [Upgrade guide](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-upgrade-guide) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/preparation) [Configuring Electron](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/configuring-electron) [App Icons for Electron](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/app-icons-electron) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/build-commands) [Preload Script](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-preload-script) [Electron Packages](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-packages) [Accessing files](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-accessing-files) [Frameless Electron Window](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/frameless-electron-window) [Electron with Typescript](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-with-typescript) [Electron Security Concerns](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-security-concerns) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/troubleshooting-and-tips) + +Browser Extensions mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/preparation) [Configuring BEX](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/configuring-bex) [App Icons for BEX](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/app-icons-browser-extension) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/build-commands) [Types of BEX](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/types-of-bex) [BEX Bridge Communication](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/bex-bridge) [Background Script](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/background-script) [Content Scripts](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/content-scripts) + +[Ajax Requests](https://quasar.dev/quasar-cli-webpack/ajax-requests) [Opening Dev Server To Public](https://quasar.dev/quasar-cli-webpack/opening-dev-server-to-public) + +_stars_ + +Icon Genie CLI + +[Introduction](https://quasar.dev/icongenie/introduction) [Installation / Upgrade notes](https://quasar.dev/icongenie/installation) [Command list](https://quasar.dev/icongenie/command-list) [App Icons List](https://quasar.dev/icongenie/app-icons-list) [Profile files](https://quasar.dev/icongenie/profile-files) + +_note\_add_ + +App Extensions + +[Introduction](https://quasar.dev/app-extensions/introduction) [Discover App Extensions](https://quasar.dev/app-extensions/discover) + +Development Guide + +[Introduction](https://quasar.dev/app-extensions/development-guide/introduction) [Prompts API](https://quasar.dev/app-extensions/development-guide/prompts-api) [Install API](https://quasar.dev/app-extensions/development-guide/install-api) [Index API](https://quasar.dev/app-extensions/development-guide/index-api) [Uninstall API](https://quasar.dev/app-extensions/development-guide/uninstall-api) + +Tips and Tricks + +[Introduction](https://quasar.dev/app-extensions/tips-and-tricks/introduction) [Provide a UI component](https://quasar.dev/app-extensions/tips-and-tricks/provide-a-ui-component) [Provide a directive](https://quasar.dev/app-extensions/tips-and-tricks/provide-a-directive) [Inject Quasar Plugin](https://quasar.dev/app-extensions/tips-and-tricks/inject-quasar-plugin) [Starter kit equivalent](https://quasar.dev/app-extensions/tips-and-tricks/starter-kit-equivalent) [Chain Webpack](https://quasar.dev/app-extensions/tips-and-tricks/chain-webpack) + +_healing_ + +Quasar Utils + +[Date Utils](https://quasar.dev/quasar-utils/date-utils) [Color Utils](https://quasar.dev/quasar-utils/color-utils) [DOM Utils](https://quasar.dev/quasar-utils/dom-utils) [Morph Utils](https://quasar.dev/quasar-utils/morph-utils) [Formatter Utils](https://quasar.dev/quasar-utils/formatter-utils) [Scrolling Utils](https://quasar.dev/quasar-utils/scrolling-utils) [Type Checking Utils](https://quasar.dev/quasar-utils/type-checking-utils) [EventBus Util](https://quasar.dev/quasar-utils/event-bus-util) [Other Utils](https://quasar.dev/quasar-utils/other-utils) + +Skeleton + +[Vue Components\\ +\\ +Circular Progress](https://quasar.dev/vue-components/circular-progress) [Vue Components\\ +\\ +Inner Loading](https://quasar.dev/vue-components/inner-loading) [Vue Components\\ +\\ +Spinners](https://quasar.dev/vue-components/spinners) [Quasar Plugins\\ +\\ +Loading](https://quasar.dev/quasar-plugins/loading) [Quasar Plugins\\ +\\ +Loading Bar](https://quasar.dev/quasar-plugins/loading-bar) + +The QSkeleton is a component for displaying a placeholder preview of your content before you load the actual page data. It’s a nice way of informing the user of what to expect from the page before it is fully loaded and increases the perceived performance. It can be used to incrementally display information on screen as data is being fetched. + +QSkeleton API + +props + +10 + +slots + +1 + +* * * + +content + +2 + +style + +8 + +* * * + +type + +: String + +Description + +Type of skeleton placeholder + +tag + +: String + +Description + +HTML tag to use + +## Usage + +On a QCard + +* * * + +_code_ + +Template + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +### Predefined types + +Below you can see the predefined types. There are some basic types (text, rect, circle) and also some special convenience types that accurately respect Quasar components size and border radius. + +QSkeleton types + +* * * + +_code_ + +Template + +Script + +All + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +"text" + +* * * + +"rect" + +* * * + +"circle" + +* * * + +"QBtn" + +* * * + +"QBadge" + +* * * + +"QChip" + +* * * + +"QToolbar" + +* * * + +"QCheckbox" + +* * * + +"QRadio" + +* * * + +"QToggle" + +* * * + +"QSlider" + +* * * + +"QRange" + +* * * + +"QInput" + +* * * + +"QAvatar" + +* * * + +### Animations + +Animations + +* * * + +_code_ + +Template + +Script + +All + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +"wave" + +* * * + +"pulse" + +* * * + +"pulse-x" + +* * * + +"pulse-y" + +* * * + +"fade" + +* * * + +"blink" + +* * * + +"none" + +* * * + +### Sizing + +Sizing + +* * * + +_code_ + +Template + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +### Styling + +Bordered + +* * * + +_code_ + +Template + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +Square borders + +* * * + +_code_ + +Template + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +Custom color + +* * * + +_code_ + +Template + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +Custom border + +* * * + +_code_ + +Template + +Style + +All + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +### Recipes + +Enjoy some pre-made recipes. Your imagination is the only limit. + +Youtube + +* * * + +_code_ + +Template + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +Facebook + +* * * + +_code_ + +Template + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +Twitter + +* * * + +_code_ + +Template + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +_chat\_bubble\_outline_ + +_repeat_ + +_favorite\_border_ + +Twitch + +* * * + +_code_ + +Template + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +Table + +* * * + +_code_ + +Template + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +| | | | | | | +| --- | --- | --- | --- | --- | --- | +| | | | | | | +| | | | | | | +| | | | | | | +| | | | | | | +| | | | | | | + +List + +* * * + +_code_ + +Template + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +Ready for more? + +[Vue Components\\ +\\ +Separator](https://quasar.dev/vue-components/separator) [Vue Components\\ +\\ +Slide Item](https://quasar.dev/vue-components/slide-item) + +* * * + +Caught a mistake? [Edit this page in browser](https://github.com/quasarframework/quasar/edit/dev/docs/src/pages/vue-components/skeleton.md) + +1\. Introduction + +2\. QSkeleton API + +3\. Usage + +3.1. Predefined types + +3.2. Animations + +3.3. Sizing + +3.4. Styling + +3.5. Recipes + +[MIT License](https://github.com/quasarframework/quasar/blob/dev/LICENSE) [Privacy Policy](https://www.iubenda.com/privacy-policy/40685560) + +Copyright © 2015-present PULSARDEV SRL, [Razvan Stoenescu](https://github.com/rstoenescu) + +This website has been designed in collaboration with [Dreamonkey Srl](https://www.dreamonkey.com/) + +Our third-party tools use cookies, which are necessary for its functioning and required to achieve the purposes illustrated in the cookie policy. + +AcceptLearn more + +## QToggle Component Overview +[_assignment\_late_\\ +\\ +Why donate](https://quasar.dev/why-donate) [_travel\_explore_\\ +\\ +API Explorer](https://quasar.dev/api-explorer) + +_code_ + +How to contribute + +[Contribution Guide](https://quasar.dev/how-to-contribute/contribution-guide) [Running Projects](https://quasar.dev/how-to-contribute/running-projects) [Start a New Project](https://quasar.dev/how-to-contribute/new-project) [Project Maintainer Role](https://quasar.dev/how-to-contribute/project-maintainer) [Commit Conventions](https://quasar.dev/how-to-contribute/commit-conventions) + +_tune_ + +Options & Helpers + +[The $q object](https://quasar.dev/options/the-q-object) [App Icons](https://quasar.dev/options/app-icons) [SEO](https://quasar.dev/options/seo) [Quasar Language Packs](https://quasar.dev/options/quasar-language-packs) [App Internationalization](https://quasar.dev/options/app-internationalization) [RTL Support](https://quasar.dev/options/rtl-support) [Installing Icon Libraries](https://quasar.dev/options/installing-icon-libraries) [Quasar Icon Sets](https://quasar.dev/options/quasar-icon-sets) [Platform Detection](https://quasar.dev/options/platform-detection) [Screen Plugin](https://quasar.dev/options/screen-plugin) [Animations](https://quasar.dev/options/animations) [Transitions](https://quasar.dev/options/transitions) + +_style_ + +Style & Identity + +[Typography](https://quasar.dev/style/typography) [Color Palette](https://quasar.dev/style/color-palette) [Theme Builder](https://quasar.dev/style/theme-builder) [Dark Mode](https://quasar.dev/style/dark-mode) [Spacing](https://quasar.dev/style/spacing) [Shadows](https://quasar.dev/style/shadows) [Breakpoints](https://quasar.dev/style/breakpoints) [Body classes](https://quasar.dev/style/body-classes) [Visibility](https://quasar.dev/style/visibility) [Positioning](https://quasar.dev/style/positioning) [Sass/SCSS Variables](https://quasar.dev/style/sass-scss-variables) [Other Helper Classes](https://quasar.dev/style/other-helper-classes) + +_view\_quilt_ + +Layout and Grid + +Flex Grid + +[Introduction to Flexbox](https://quasar.dev/layout/grid/introduction-to-flexbox) [Grid Row](https://quasar.dev/layout/grid/row) [Grid Column](https://quasar.dev/layout/grid/column) [Grid Gutter](https://quasar.dev/layout/grid/gutter) [Flexbox patterns](https://quasar.dev/layout/grid/flexbox-patterns) [Flex Playground](https://quasar.dev/layout/grid/flex-playground) + +[Layout](https://quasar.dev/layout/layout) [Routing with Layouts and Pages](https://quasar.dev/layout/routing-with-layouts-and-pages) [Layout Header and Footer](https://quasar.dev/layout/header-and-footer) [Layout Drawer](https://quasar.dev/layout/drawer) [Layout Page](https://quasar.dev/layout/page) [Layout Builder](https://quasar.dev/layout-builder) [Layout Gallery](https://quasar.dev/layout/gallery) [Page Sticky](https://quasar.dev/layout/page-sticky) [Page Scroller](https://quasar.dev/layout/page-scroller) + +_widgets_ + +Vue Components + +[Ajax Bar](https://quasar.dev/vue-components/ajax-bar) [Avatar](https://quasar.dev/vue-components/avatar) [Badge](https://quasar.dev/vue-components/badge) [Banner](https://quasar.dev/vue-components/banner) [Bar](https://quasar.dev/vue-components/bar) [Breadcrumbs](https://quasar.dev/vue-components/breadcrumbs) + +Buttons + +[Button](https://quasar.dev/vue-components/button) [Button Group](https://quasar.dev/vue-components/button-group) [Button Dropdown](https://quasar.dev/vue-components/button-dropdown) + +[Card](https://quasar.dev/vue-components/card) [Carousel](https://quasar.dev/vue-components/carousel) [Chat Message](https://quasar.dev/vue-components/chat) [Chip](https://quasar.dev/vue-components/chip) [Circular Progress](https://quasar.dev/vue-components/circular-progress) [Color Picker](https://quasar.dev/vue-components/color-picker) [Dialog](https://quasar.dev/vue-components/dialog) [Editor - WYSIWYG](https://quasar.dev/vue-components/editor) [Expansion Item](https://quasar.dev/vue-components/expansion-item) [Floating Action Button](https://quasar.dev/vue-components/floating-action-button) + +Form Components + +[Input Textfield](https://quasar.dev/vue-components/input) [Select](https://quasar.dev/vue-components/select) [File picker](https://quasar.dev/vue-components/file) [Form](https://quasar.dev/vue-components/form) [Field (wrapper)](https://quasar.dev/vue-components/field) [Radio](https://quasar.dev/vue-components/radio) [Checkbox](https://quasar.dev/vue-components/checkbox) [Toggle](https://quasar.dev/vue-components/toggle) [Button Toggle](https://quasar.dev/vue-components/button-toggle) [Option Group](https://quasar.dev/vue-components/option-group) [Slider](https://quasar.dev/vue-components/slider) [Range](https://quasar.dev/vue-components/range) [Time Picker](https://quasar.dev/vue-components/time) [Date Picker](https://quasar.dev/vue-components/date) + +[Icon](https://quasar.dev/vue-components/icon) [Img](https://quasar.dev/vue-components/img) [Infinite Scroll](https://quasar.dev/vue-components/infinite-scroll) [Inner Loading](https://quasar.dev/vue-components/inner-loading) [Intersection](https://quasar.dev/vue-components/intersection) [Knob](https://quasar.dev/vue-components/knob) [Linear Progress](https://quasar.dev/vue-components/linear-progress) [List & List Items](https://quasar.dev/vue-components/list-and-list-items) [Markup Table](https://quasar.dev/vue-components/markup-table) [Menu](https://quasar.dev/vue-components/menu) [No SSR](https://quasar.dev/vue-components/no-ssr) + +Observers + +[Resize Observer (for Element)](https://quasar.dev/vue-components/resize-observer) [Scroll Observer](https://quasar.dev/vue-components/scroll-observer) + +[Pagination](https://quasar.dev/vue-components/pagination) [Parallax](https://quasar.dev/vue-components/parallax) [Popup Edit](https://quasar.dev/vue-components/popup-edit) [Popup Proxy](https://quasar.dev/vue-components/popup-proxy) [Pull to refresh](https://quasar.dev/vue-components/pull-to-refresh) [Rating](https://quasar.dev/vue-components/rating) [Responsive](https://quasar.dev/vue-components/responsive) [Scroll Area](https://quasar.dev/vue-components/scroll-area) [Separator](https://quasar.dev/vue-components/separator) [Skeleton](https://quasar.dev/vue-components/skeleton) [Slide Item](https://quasar.dev/vue-components/slide-item) [Slide Transition](https://quasar.dev/vue-components/slide-transition) [Space](https://quasar.dev/vue-components/space) [Spinners](https://quasar.dev/vue-components/spinners) [Splitter](https://quasar.dev/vue-components/splitter) [Stepper](https://quasar.dev/vue-components/stepper) [Table](https://quasar.dev/vue-components/table) [Tabs](https://quasar.dev/vue-components/tabs) [Tab Panels](https://quasar.dev/vue-components/tab-panels) [Timeline](https://quasar.dev/vue-components/timeline) [Toolbar](https://quasar.dev/vue-components/toolbar) [Tooltip](https://quasar.dev/vue-components/tooltip) [Tree](https://quasar.dev/vue-components/tree) [Uploader](https://quasar.dev/vue-components/uploader) [Video](https://quasar.dev/vue-components/video) [Virtual Scroll](https://quasar.dev/vue-components/virtual-scroll) + +_swap\_calls_ + +Vue Directives + +[Close Popup](https://quasar.dev/vue-directives/close-popup) [Intersection](https://quasar.dev/vue-directives/intersection) [Material Ripples](https://quasar.dev/vue-directives/material-ripples) [Mutation](https://quasar.dev/vue-directives/mutation) [Morph](https://quasar.dev/vue-directives/morph) [Scroll](https://quasar.dev/vue-directives/scroll) [Scroll Fire](https://quasar.dev/vue-directives/scroll-fire) [Touch Hold](https://quasar.dev/vue-directives/touch-hold) [Touch Pan](https://quasar.dev/vue-directives/touch-pan) [Touch Repeat](https://quasar.dev/vue-directives/touch-repeat) [Touch Swipe](https://quasar.dev/vue-directives/touch-swipe) + +_extension_ + +Quasar Plugins + +[Addressbar Color](https://quasar.dev/quasar-plugins/addressbar-color) [App Fullscreen](https://quasar.dev/quasar-plugins/app-fullscreen) [App Visibility](https://quasar.dev/quasar-plugins/app-visibility) [Bottom Sheet](https://quasar.dev/quasar-plugins/bottom-sheet) [Cookies](https://quasar.dev/quasar-plugins/cookies) [Dark](https://quasar.dev/quasar-plugins/dark) [Dialog](https://quasar.dev/quasar-plugins/dialog) [Loading](https://quasar.dev/quasar-plugins/loading) [Loading Bar](https://quasar.dev/quasar-plugins/loading-bar) [Local/Session Storage](https://quasar.dev/quasar-plugins/web-storage) [Meta](https://quasar.dev/quasar-plugins/meta) [Notify](https://quasar.dev/quasar-plugins/notify) + +_developer\_mode_ + +Vue Composables + +[useQuasar](https://quasar.dev/vue-composables/use-quasar) [useDialogPluginComponent](https://quasar.dev/vue-composables/use-dialog-plugin-component) [useFormChild](https://quasar.dev/vue-composables/use-form-child) [useMeta](https://quasar.dev/vue-composables/use-meta) [useHydration\\ +\\ +new](https://quasar.dev/vue-composables/use-hydration) [useId\\ +\\ +new](https://quasar.dev/vue-composables/use-id) [useInterval\\ +\\ +new](https://quasar.dev/vue-composables/use-interval) [useRenderCache\\ +\\ +new](https://quasar.dev/vue-composables/use-render-cache) [useTick\\ +\\ +new](https://quasar.dev/vue-composables/use-tick) [useTimeout\\ +\\ +new](https://quasar.dev/vue-composables/use-timeout) [useSplitAttrs\\ +\\ +new](https://quasar.dev/vue-composables/use-split-attrs) + +_security_ + +Security + +[DO's and DON'Ts](https://quasar.dev/security/dos-and-donts) [Report a vulnerability](https://quasar.dev/security/report-a-vulnerability) + +_build_ + +Quasar CLI (with Vite) + +[Upgrade guide\\ +\\ +NEW!](https://quasar.dev/quasar-cli-vite/upgrade-guide) [The quasar.config file](https://quasar.dev/quasar-cli-vite/quasar-config-file) [Convert project to CLI with Vite](https://quasar.dev/quasar-cli-vite/convert-to-quasar-cli-with-vite) [Browser Compatibility](https://quasar.dev/quasar-cli-vite/browser-compatibility) [Supporting TypeScript](https://quasar.dev/quasar-cli-vite/supporting-ts) [Directory Structure](https://quasar.dev/quasar-cli-vite/directory-structure) [Commands List](https://quasar.dev/quasar-cli-vite/commands-list) [CSS Preprocessors](https://quasar.dev/quasar-cli-vite/css-preprocessors) [Routing](https://quasar.dev/quasar-cli-vite/routing) [Lazy Loading - Code Splitting](https://quasar.dev/quasar-cli-vite/lazy-loading) [Handling Assets](https://quasar.dev/quasar-cli-vite/handling-assets) [Boot Files](https://quasar.dev/quasar-cli-vite/boot-files) [Prefetch Feature](https://quasar.dev/quasar-cli-vite/prefetch-feature) [API Proxying](https://quasar.dev/quasar-cli-vite/api-proxying) [Handling Vite](https://quasar.dev/quasar-cli-vite/handling-vite) [Handling process.env](https://quasar.dev/quasar-cli-vite/handling-process-env) [State Management with Pinia](https://quasar.dev/quasar-cli-vite/state-management-with-pinia) [Linter](https://quasar.dev/quasar-cli-vite/linter) [Testing & Auditing](https://quasar.dev/quasar-cli-vite/testing-and-auditing) + +SPA mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-spa/introduction) [App Icons for SPA](https://quasar.dev/quasar-cli-vite/developing-spa/app-icons-spa) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-spa/build-commands) [Deploying](https://quasar.dev/quasar-cli-vite/developing-spa/deploying) + +SSR mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-ssr/introduction) [Writing Universal Code](https://quasar.dev/quasar-cli-vite/developing-ssr/writing-universal-code) [Preparation](https://quasar.dev/quasar-cli-vite/developing-ssr/preparation) [Configuring SSR](https://quasar.dev/quasar-cli-vite/developing-ssr/configuring-ssr) [ssrContext](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-context) [SSR Middleware](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-middleware) [SSR Webserver](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-webserver) [Vue SSR Directives](https://quasar.dev/quasar-cli-vite/developing-ssr/vue-ssr-directives) [App Icons for SSR](https://quasar.dev/quasar-cli-vite/developing-ssr/app-icons-ssr) [SEO for SSR](https://quasar.dev/quasar-cli-vite/developing-ssr/seo-for-ssr) [Client Side Hydration](https://quasar.dev/quasar-cli-vite/developing-ssr/client-side-hydration) [Handling 404 and 500 Errors](https://quasar.dev/quasar-cli-vite/developing-ssr/handling-404-and-500-errors) [SSR with PWA](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-with-pwa) [SSR FAQ](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-frequently-asked-questions) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-ssr/build-commands) [SSR with Typescript](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-with-typescript) [Deploying](https://quasar.dev/quasar-cli-vite/developing-ssr/deploying) + +PWA mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-pwa/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-pwa/preparation) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-pwa/build-commands) [Configuring PWA](https://quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa) [HMR for PWA](https://quasar.dev/quasar-cli-vite/developing-pwa/hmr-for-dev) [App Icons for PWA](https://quasar.dev/quasar-cli-vite/developing-pwa/app-icons-pwa) [Handling Service Worker](https://quasar.dev/quasar-cli-vite/developing-pwa/handling-service-worker) [PWA with Typescript](https://quasar.dev/quasar-cli-vite/developing-pwa/pwa-with-typescript) + +[Developing Mobile Apps](https://quasar.dev/quasar-cli-vite/developing-mobile-apps) + +Capacitor mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/preparation) [Capacitor versions](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/capacitor-version-support) [Configuring Capacitor](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/configuring-capacitor) [App Icons for Capacitor](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/app-icons-capacitor) [Capacitor API](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/capacitor-api) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/publishing-to-store) + +Cordova mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/preparation) [Configuring Cordova](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/configuring-cordova) [App Icons for Cordova](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/app-icons-cordova) [Cordova Plugins](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/cordova-plugins) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/publishing-to-store) + +Electron mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-electron-apps/introduction) [Upgrade guide](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-upgrade-guide) [Preparation](https://quasar.dev/quasar-cli-vite/developing-electron-apps/preparation) [Configuring Electron](https://quasar.dev/quasar-cli-vite/developing-electron-apps/configuring-electron) [App Icons for Electron](https://quasar.dev/quasar-cli-vite/developing-electron-apps/app-icons-electron) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-electron-apps/build-commands) [Preload Script](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-preload-script) [Electron Packages](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-packages) [Accessing files](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-accessing-files) [Frameless Electron Window](https://quasar.dev/quasar-cli-vite/developing-electron-apps/frameless-electron-window) [Electron with Typescript](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-with-typescript) [Electron Security Concerns](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-security-concerns) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-vite/developing-electron-apps/troubleshooting-and-tips) + +Browser Extensions mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/preparation) [Configuring BEX](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex) [App Icons for BEX](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/app-icons-browser-extension) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/build-commands) [Types of BEX](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/types-of-bex) [BEX Bridge Communication](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/bex-bridge) [Background Script](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/background-script) [Content Scripts](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/content-scripts) + +[Ajax Requests](https://quasar.dev/quasar-cli-vite/ajax-requests) [Opening Dev Server To Public](https://quasar.dev/quasar-cli-vite/opening-dev-server-to-public) + +_build_ + +Quasar CLI (with Webpack) + +[Upgrade guide\\ +\\ +NEW!](https://quasar.dev/quasar-cli-webpack/upgrade-guide) [The quasar.config file](https://quasar.dev/quasar-cli-webpack/quasar-config-file) [Convert to CLI with Webpack](https://quasar.dev/quasar-cli-webpack/convert-to-quasar-cli-with-webpack) [Browser Compatibility](https://quasar.dev/quasar-cli-webpack/browser-compatibility) [Supporting TypeScript](https://quasar.dev/quasar-cli-webpack/supporting-ts) [Directory Structure](https://quasar.dev/quasar-cli-webpack/directory-structure) [Commands List](https://quasar.dev/quasar-cli-webpack/commands-list) [CSS Preprocessors](https://quasar.dev/quasar-cli-webpack/css-preprocessors) [Routing](https://quasar.dev/quasar-cli-webpack/routing) [Lazy Loading - Code Splitting](https://quasar.dev/quasar-cli-webpack/lazy-loading) [Handling Assets](https://quasar.dev/quasar-cli-webpack/handling-assets) [Boot Files](https://quasar.dev/quasar-cli-webpack/boot-files) [Prefetch Feature](https://quasar.dev/quasar-cli-webpack/prefetch-feature) [API Proxying](https://quasar.dev/quasar-cli-webpack/api-proxying) [Handling Webpack](https://quasar.dev/quasar-cli-webpack/handling-webpack) [Handling process.env](https://quasar.dev/quasar-cli-webpack/handling-process-env) [State Management with Pinia](https://quasar.dev/quasar-cli-webpack/state-management-with-pinia) [Linter](https://quasar.dev/quasar-cli-webpack/linter) [Testing & Auditing](https://quasar.dev/quasar-cli-webpack/testing-and-auditing) + +SPA mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-spa/introduction) [App Icons for SPA](https://quasar.dev/quasar-cli-webpack/developing-spa/app-icons-spa) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-spa/build-commands) [Deploying](https://quasar.dev/quasar-cli-webpack/developing-spa/deploying) + +SSR mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-ssr/introduction) [Writing Universal Code](https://quasar.dev/quasar-cli-webpack/developing-ssr/writing-universal-code) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-ssr/preparation) [Configuring SSR](https://quasar.dev/quasar-cli-webpack/developing-ssr/configuring-ssr) [ssrContext](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-context) [SSR Middleware](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-middleware) [SSR Webserver](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-webserver) [Vue SSR Directives](https://quasar.dev/quasar-cli-webpack/developing-ssr/vue-ssr-directives) [App Icons for SSR](https://quasar.dev/quasar-cli-webpack/developing-ssr/app-icons-ssr) [SEO for SSR](https://quasar.dev/quasar-cli-webpack/developing-ssr/seo-for-ssr) [Client Side Hydration](https://quasar.dev/quasar-cli-webpack/developing-ssr/client-side-hydration) [Handling 404 and 500 Errors](https://quasar.dev/quasar-cli-webpack/developing-ssr/handling-404-and-500-errors) [SSR with PWA](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-with-pwa) [SSR FAQ](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-frequently-asked-questions) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-ssr/build-commands) [SSR with Typescript](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-with-typescript) [Deploying](https://quasar.dev/quasar-cli-webpack/developing-ssr/deploying) + +PWA mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-pwa/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-pwa/preparation) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-pwa/build-commands) [Configuring PWA](https://quasar.dev/quasar-cli-webpack/developing-pwa/configuring-pwa) [HMR for PWA](https://quasar.dev/quasar-cli-webpack/developing-pwa/hmr-for-dev) [App Icons for PWA](https://quasar.dev/quasar-cli-webpack/developing-pwa/app-icons-pwa) [Handling Service Worker](https://quasar.dev/quasar-cli-webpack/developing-pwa/handling-service-worker) [PWA with Typescript](https://quasar.dev/quasar-cli-webpack/developing-pwa/pwa-with-typescript) + +[Developing Mobile Apps](https://quasar.dev/quasar-cli-webpack/developing-mobile-apps) + +Capacitor mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/preparation) [Capacitor versions](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/capacitor-version-support) [Configuring Capacitor](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/configuring-capacitor) [App Icons for Capacitor](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/app-icons-capacitor) [Capacitor API](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/capacitor-api) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/publishing-to-store) + +Cordova mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/preparation) [Configuring Cordova](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/configuring-cordova) [App Icons for Cordova](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/app-icons-cordova) [Cordova Plugins](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/cordova-plugins) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/publishing-to-store) + +Electron mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/introduction) [Upgrade guide](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-upgrade-guide) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/preparation) [Configuring Electron](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/configuring-electron) [App Icons for Electron](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/app-icons-electron) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/build-commands) [Preload Script](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-preload-script) [Electron Packages](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-packages) [Accessing files](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-accessing-files) [Frameless Electron Window](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/frameless-electron-window) [Electron with Typescript](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-with-typescript) [Electron Security Concerns](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-security-concerns) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/troubleshooting-and-tips) + +Browser Extensions mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/preparation) [Configuring BEX](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/configuring-bex) [App Icons for BEX](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/app-icons-browser-extension) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/build-commands) [Types of BEX](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/types-of-bex) [BEX Bridge Communication](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/bex-bridge) [Background Script](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/background-script) [Content Scripts](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/content-scripts) + +[Ajax Requests](https://quasar.dev/quasar-cli-webpack/ajax-requests) [Opening Dev Server To Public](https://quasar.dev/quasar-cli-webpack/opening-dev-server-to-public) + +_stars_ + +Icon Genie CLI + +[Introduction](https://quasar.dev/icongenie/introduction) [Installation / Upgrade notes](https://quasar.dev/icongenie/installation) [Command list](https://quasar.dev/icongenie/command-list) [App Icons List](https://quasar.dev/icongenie/app-icons-list) [Profile files](https://quasar.dev/icongenie/profile-files) + +_note\_add_ + +App Extensions + +[Introduction](https://quasar.dev/app-extensions/introduction) [Discover App Extensions](https://quasar.dev/app-extensions/discover) + +Development Guide + +[Introduction](https://quasar.dev/app-extensions/development-guide/introduction) [Prompts API](https://quasar.dev/app-extensions/development-guide/prompts-api) [Install API](https://quasar.dev/app-extensions/development-guide/install-api) [Index API](https://quasar.dev/app-extensions/development-guide/index-api) [Uninstall API](https://quasar.dev/app-extensions/development-guide/uninstall-api) + +Tips and Tricks + +[Introduction](https://quasar.dev/app-extensions/tips-and-tricks/introduction) [Provide a UI component](https://quasar.dev/app-extensions/tips-and-tricks/provide-a-ui-component) [Provide a directive](https://quasar.dev/app-extensions/tips-and-tricks/provide-a-directive) [Inject Quasar Plugin](https://quasar.dev/app-extensions/tips-and-tricks/inject-quasar-plugin) [Starter kit equivalent](https://quasar.dev/app-extensions/tips-and-tricks/starter-kit-equivalent) [Chain Webpack](https://quasar.dev/app-extensions/tips-and-tricks/chain-webpack) + +_healing_ + +Quasar Utils + +[Date Utils](https://quasar.dev/quasar-utils/date-utils) [Color Utils](https://quasar.dev/quasar-utils/color-utils) [DOM Utils](https://quasar.dev/quasar-utils/dom-utils) [Morph Utils](https://quasar.dev/quasar-utils/morph-utils) [Formatter Utils](https://quasar.dev/quasar-utils/formatter-utils) [Scrolling Utils](https://quasar.dev/quasar-utils/scrolling-utils) [Type Checking Utils](https://quasar.dev/quasar-utils/type-checking-utils) [EventBus Util](https://quasar.dev/quasar-utils/event-bus-util) [Other Utils](https://quasar.dev/quasar-utils/other-utils) + +Toggle + +[Form Components\\ +\\ +Checkbox](https://quasar.dev/vue-components/checkbox) [Form Components\\ +\\ +Option Group](https://quasar.dev/vue-components/option-group) [Form Components\\ +\\ +Radio](https://quasar.dev/vue-components/radio) [Form Components\\ +\\ +Button Toggle](https://quasar.dev/vue-components/button-toggle) + +The QToggle component is another basic element for user input. You can use this for turning settings, features or true/false inputs on and off. + +TIP + +Please also refer to the [QOptionGroup](https://quasar.dev/vue-components/option-group) on other possibilities for creating groups of Checkboxes. + +QToggle API + +props + +22 + +slots + +1 + +events + +1 + +methods + +1 + +* * * + +behavior + +4 + +content + +1 + +general + +1 + +icons + +3 + +label + +2 + +model + +5 + +state + +1 + +style + +5 + +* * * + +name + +: String + +Description + +Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL + +toggle-order + +: String + +Description + +Determines toggle order of the two states ('t' stands for state of true, 'f' for state of false); If 'toggle-indeterminate' is true, then the order is: indet -> first state -> second state -> indet (and repeat), otherwise: indet -> first state -> second state -> first state -> second state -> ... + +toggle-indeterminate + +: Boolean + +Description + +When user clicks/taps on the component, should we toggle through the indeterminate state too? + +keep-color + +: Boolean + +Description + +Should the color (if specified any) be kept when the component is unticked/ off? + +## Usage + +### Basic + +Use the `color` prop to control the toggle’s color. + +Basic + +* * * + +_code_ + +Template + +Script + +All + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +### With labels + +With labels + +* * * + +_code_ + +Template + +Script + +All + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +On Right + +On Right + +On Right + +On Right + +On Left + +On Left + +On Left + +On Left + +### Keeping color + +Keep color + +* * * + +_code_ + +Template + +Script + +All + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +### With icons + +Icons + +* * * + +_code_ + +Template + +Script + +All + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +_alarm_ + +_mail_ + +Same Icon for each state + +_clear_ + +_check_ + +Different icon for each state + +### Custom model values + +Instead of the default `true` / `false` values, you can use custom ones. + +Custom model values + +* * * + +_code_ + +Template + +Script + +All + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +Model is true (default behaviour) + +Agreed + +Model is number 42 + +Model is true (flipped boolean) + +### Indeterminate state + +In the example below, as soon as you click on the first QToggle it starts toggling between true/false. The second QToggle, on the other hand toggles between the three states (indeterminate/true/false) with help from `toggle-indeterminate`. You can optionally set the property `indeterminate-value`, otherwise the indeterminate value will be considered `null`. + +Indeterminate state + +* * * + +_code_ + +Template + +Script + +All + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +Did you eat lunch today? + +The model data: **"maybe"** + +Did you eat lunch today? + +The model data: **null** + +Reset + +### Toggle order + +By default, QToggle follows this chain when toggling: indeterminate -> checked -> unchecked. However, you can change this behavior through the `toggle-order` prop. This property determines the order of the states and can be `tf` (default) or `ft` ( `t` stands for state of true/checked while `f` for state of false/unchecked). + +Toggling order is: + +- if `toggle-indeterminate` is true, then: indet -> first state -> second state -> indet (and repeat) +- otherwise (no toggle-indeterminate): indet -> first state -> second state -> first state -> second state -> … + +Toggle order + +* * * + +_code_ + +Template + +Script + +All + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +Reset models + +'tf' order + +'ft' order + +'tf' order + toggle-indeterminate + +'ft' order + toggle-indeterminate + +### Array model + +If you have a number of toggles for a selection, use can use an Array as the model for all of them and specify `val` prop on each toggle. If the toggle is ticked, its `val` will be inserted into the array and vice versa. + +Array model + +* * * + +_code_ + +Template + +Script + +All + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +Blue + +Yellow + +Green + +Red + +Model: \[\ +"yellow",\ +"red"\ +\] + +### Dark design + +Force dark mode + +* * * + +_code_ + +Template + +Script + +All + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +### Disable + +Disabled state + +* * * + +_code_ + +Template + +Script + +All + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +### Sizes + +Apart from the standard sizes below, you can define your own through the `size` property (last one is a custom size). + +Standard sizes + +* * * + +_code_ + +Template + +Script + +All + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +Size 'xs' + +Size 'sm' + +Size 'md' + +Size 'lg' + +Size 'xl' + +Size '150px' + +Your selection is: **\[**\ +**"line"**\ +**\]** + +### With QOptionGroup + +TIP + +You can also use [QOptionGroup](https://quasar.dev/vue-components/option-group), which simplifies the usage when you have groups of toggles, like in example below. + +Usage with QOptionGroup + +* * * + +_code_ + +Template + +Script + +All + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +Battery too low + +Friend request + +Picture uploaded + +### With QItem + +With QItem + +* * * + +_code_ + +Template + +Script + +All + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +Battery too low + +Friend request + +Allow notification + +Picture uploaded + +Allow notification when uploading images + +### Native form submit + +When dealing with a native form which has an `action` and a `method` (eg. when using Quasar with ASP.NET controllers), you need to specify the `name` property on QToggle, otherwise formData will not contain it (if it should) - all value are converted to string (native behaviour, so do not use Object values): + +Native form + +* * * + +_code_ + +Template + +Script + +All + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +Activate music + +Activate lights + +Rock + +Funk + +Pop + +Submit + +Ready for more? + +[Form Components\\ +\\ +Checkbox](https://quasar.dev/vue-components/checkbox) [Form Components\\ +\\ +Button Toggle](https://quasar.dev/vue-components/button-toggle) + +* * * + +Caught a mistake? [Edit this page in browser](https://github.com/quasarframework/quasar/edit/dev/docs/src/pages/vue-components/toggle.md) + +1\. Introduction + +2\. QToggle API + +3\. Usage + +3.1. Basic + +3.2. With labels + +3.3. Keeping color + +3.4. With icons + +3.5. Custom model values + +3.6. Indeterminate state + +3.7. Toggle order + +3.8. Array model + +3.9. Dark design + +3.10. Disable + +3.11. Sizes + +3.12. With QOptionGroup + +3.13. With QItem + +3.14. Native form submit + +[MIT License](https://github.com/quasarframework/quasar/blob/dev/LICENSE) [Privacy Policy](https://www.iubenda.com/privacy-policy/40685560) + +Copyright © 2015-present PULSARDEV SRL, [Razvan Stoenescu](https://github.com/rstoenescu) + +This website has been designed in collaboration with [Dreamonkey Srl](https://www.dreamonkey.com/) + +## Quasar Grid Gutter +[_assignment\_late_\\ +\\ +Why donate](https://quasar.dev/why-donate) [_travel\_explore_\\ +\\ +API Explorer](https://quasar.dev/api-explorer) + +_code_ + +How to contribute + +[Contribution Guide](https://quasar.dev/how-to-contribute/contribution-guide) [Running Projects](https://quasar.dev/how-to-contribute/running-projects) [Start a New Project](https://quasar.dev/how-to-contribute/new-project) [Project Maintainer Role](https://quasar.dev/how-to-contribute/project-maintainer) [Commit Conventions](https://quasar.dev/how-to-contribute/commit-conventions) + +_tune_ + +Options & Helpers + +[The $q object](https://quasar.dev/options/the-q-object) [App Icons](https://quasar.dev/options/app-icons) [SEO](https://quasar.dev/options/seo) [Quasar Language Packs](https://quasar.dev/options/quasar-language-packs) [App Internationalization](https://quasar.dev/options/app-internationalization) [RTL Support](https://quasar.dev/options/rtl-support) [Installing Icon Libraries](https://quasar.dev/options/installing-icon-libraries) [Quasar Icon Sets](https://quasar.dev/options/quasar-icon-sets) [Platform Detection](https://quasar.dev/options/platform-detection) [Screen Plugin](https://quasar.dev/options/screen-plugin) [Animations](https://quasar.dev/options/animations) [Transitions](https://quasar.dev/options/transitions) + +_style_ + +Style & Identity + +[Typography](https://quasar.dev/style/typography) [Color Palette](https://quasar.dev/style/color-palette) [Theme Builder](https://quasar.dev/style/theme-builder) [Dark Mode](https://quasar.dev/style/dark-mode) [Spacing](https://quasar.dev/style/spacing) [Shadows](https://quasar.dev/style/shadows) [Breakpoints](https://quasar.dev/style/breakpoints) [Body classes](https://quasar.dev/style/body-classes) [Visibility](https://quasar.dev/style/visibility) [Positioning](https://quasar.dev/style/positioning) [Sass/SCSS Variables](https://quasar.dev/style/sass-scss-variables) [Other Helper Classes](https://quasar.dev/style/other-helper-classes) + +_view\_quilt_ + +Layout and Grid + +Flex Grid + +[Introduction to Flexbox](https://quasar.dev/layout/grid/introduction-to-flexbox) [Grid Row](https://quasar.dev/layout/grid/row) [Grid Column](https://quasar.dev/layout/grid/column) [Grid Gutter](https://quasar.dev/layout/grid/gutter) [Flexbox patterns](https://quasar.dev/layout/grid/flexbox-patterns) [Flex Playground](https://quasar.dev/layout/grid/flex-playground) + +[Layout](https://quasar.dev/layout/layout) [Routing with Layouts and Pages](https://quasar.dev/layout/routing-with-layouts-and-pages) [Layout Header and Footer](https://quasar.dev/layout/header-and-footer) [Layout Drawer](https://quasar.dev/layout/drawer) [Layout Page](https://quasar.dev/layout/page) [Layout Builder](https://quasar.dev/layout-builder) [Layout Gallery](https://quasar.dev/layout/gallery) [Page Sticky](https://quasar.dev/layout/page-sticky) [Page Scroller](https://quasar.dev/layout/page-scroller) + +_widgets_ + +Vue Components + +[Ajax Bar](https://quasar.dev/vue-components/ajax-bar) [Avatar](https://quasar.dev/vue-components/avatar) [Badge](https://quasar.dev/vue-components/badge) [Banner](https://quasar.dev/vue-components/banner) [Bar](https://quasar.dev/vue-components/bar) [Breadcrumbs](https://quasar.dev/vue-components/breadcrumbs) + +Buttons + +[Button](https://quasar.dev/vue-components/button) [Button Group](https://quasar.dev/vue-components/button-group) [Button Dropdown](https://quasar.dev/vue-components/button-dropdown) + +[Card](https://quasar.dev/vue-components/card) [Carousel](https://quasar.dev/vue-components/carousel) [Chat Message](https://quasar.dev/vue-components/chat) [Chip](https://quasar.dev/vue-components/chip) [Circular Progress](https://quasar.dev/vue-components/circular-progress) [Color Picker](https://quasar.dev/vue-components/color-picker) [Dialog](https://quasar.dev/vue-components/dialog) [Editor - WYSIWYG](https://quasar.dev/vue-components/editor) [Expansion Item](https://quasar.dev/vue-components/expansion-item) [Floating Action Button](https://quasar.dev/vue-components/floating-action-button) + +Form Components + +[Input Textfield](https://quasar.dev/vue-components/input) [Select](https://quasar.dev/vue-components/select) [File picker](https://quasar.dev/vue-components/file) [Form](https://quasar.dev/vue-components/form) [Field (wrapper)](https://quasar.dev/vue-components/field) [Radio](https://quasar.dev/vue-components/radio) [Checkbox](https://quasar.dev/vue-components/checkbox) [Toggle](https://quasar.dev/vue-components/toggle) [Button Toggle](https://quasar.dev/vue-components/button-toggle) [Option Group](https://quasar.dev/vue-components/option-group) [Slider](https://quasar.dev/vue-components/slider) [Range](https://quasar.dev/vue-components/range) [Time Picker](https://quasar.dev/vue-components/time) [Date Picker](https://quasar.dev/vue-components/date) + +[Icon](https://quasar.dev/vue-components/icon) [Img](https://quasar.dev/vue-components/img) [Infinite Scroll](https://quasar.dev/vue-components/infinite-scroll) [Inner Loading](https://quasar.dev/vue-components/inner-loading) [Intersection](https://quasar.dev/vue-components/intersection) [Knob](https://quasar.dev/vue-components/knob) [Linear Progress](https://quasar.dev/vue-components/linear-progress) [List & List Items](https://quasar.dev/vue-components/list-and-list-items) [Markup Table](https://quasar.dev/vue-components/markup-table) [Menu](https://quasar.dev/vue-components/menu) [No SSR](https://quasar.dev/vue-components/no-ssr) + +Observers + +[Resize Observer (for Element)](https://quasar.dev/vue-components/resize-observer) [Scroll Observer](https://quasar.dev/vue-components/scroll-observer) + +[Pagination](https://quasar.dev/vue-components/pagination) [Parallax](https://quasar.dev/vue-components/parallax) [Popup Edit](https://quasar.dev/vue-components/popup-edit) [Popup Proxy](https://quasar.dev/vue-components/popup-proxy) [Pull to refresh](https://quasar.dev/vue-components/pull-to-refresh) [Rating](https://quasar.dev/vue-components/rating) [Responsive](https://quasar.dev/vue-components/responsive) [Scroll Area](https://quasar.dev/vue-components/scroll-area) [Separator](https://quasar.dev/vue-components/separator) [Skeleton](https://quasar.dev/vue-components/skeleton) [Slide Item](https://quasar.dev/vue-components/slide-item) [Slide Transition](https://quasar.dev/vue-components/slide-transition) [Space](https://quasar.dev/vue-components/space) [Spinners](https://quasar.dev/vue-components/spinners) [Splitter](https://quasar.dev/vue-components/splitter) [Stepper](https://quasar.dev/vue-components/stepper) [Table](https://quasar.dev/vue-components/table) [Tabs](https://quasar.dev/vue-components/tabs) [Tab Panels](https://quasar.dev/vue-components/tab-panels) [Timeline](https://quasar.dev/vue-components/timeline) [Toolbar](https://quasar.dev/vue-components/toolbar) [Tooltip](https://quasar.dev/vue-components/tooltip) [Tree](https://quasar.dev/vue-components/tree) [Uploader](https://quasar.dev/vue-components/uploader) [Video](https://quasar.dev/vue-components/video) [Virtual Scroll](https://quasar.dev/vue-components/virtual-scroll) + +_swap\_calls_ + +Vue Directives + +[Close Popup](https://quasar.dev/vue-directives/close-popup) [Intersection](https://quasar.dev/vue-directives/intersection) [Material Ripples](https://quasar.dev/vue-directives/material-ripples) [Mutation](https://quasar.dev/vue-directives/mutation) [Morph](https://quasar.dev/vue-directives/morph) [Scroll](https://quasar.dev/vue-directives/scroll) [Scroll Fire](https://quasar.dev/vue-directives/scroll-fire) [Touch Hold](https://quasar.dev/vue-directives/touch-hold) [Touch Pan](https://quasar.dev/vue-directives/touch-pan) [Touch Repeat](https://quasar.dev/vue-directives/touch-repeat) [Touch Swipe](https://quasar.dev/vue-directives/touch-swipe) + +_extension_ + +Quasar Plugins + +[Addressbar Color](https://quasar.dev/quasar-plugins/addressbar-color) [App Fullscreen](https://quasar.dev/quasar-plugins/app-fullscreen) [App Visibility](https://quasar.dev/quasar-plugins/app-visibility) [Bottom Sheet](https://quasar.dev/quasar-plugins/bottom-sheet) [Cookies](https://quasar.dev/quasar-plugins/cookies) [Dark](https://quasar.dev/quasar-plugins/dark) [Dialog](https://quasar.dev/quasar-plugins/dialog) [Loading](https://quasar.dev/quasar-plugins/loading) [Loading Bar](https://quasar.dev/quasar-plugins/loading-bar) [Local/Session Storage](https://quasar.dev/quasar-plugins/web-storage) [Meta](https://quasar.dev/quasar-plugins/meta) [Notify](https://quasar.dev/quasar-plugins/notify) + +_developer\_mode_ + +Vue Composables + +[useQuasar](https://quasar.dev/vue-composables/use-quasar) [useDialogPluginComponent](https://quasar.dev/vue-composables/use-dialog-plugin-component) [useFormChild](https://quasar.dev/vue-composables/use-form-child) [useMeta](https://quasar.dev/vue-composables/use-meta) [useHydration\\ +\\ +new](https://quasar.dev/vue-composables/use-hydration) [useId\\ +\\ +new](https://quasar.dev/vue-composables/use-id) [useInterval\\ +\\ +new](https://quasar.dev/vue-composables/use-interval) [useRenderCache\\ +\\ +new](https://quasar.dev/vue-composables/use-render-cache) [useTick\\ +\\ +new](https://quasar.dev/vue-composables/use-tick) [useTimeout\\ +\\ +new](https://quasar.dev/vue-composables/use-timeout) [useSplitAttrs\\ +\\ +new](https://quasar.dev/vue-composables/use-split-attrs) + +_security_ + +Security + +[DO's and DON'Ts](https://quasar.dev/security/dos-and-donts) [Report a vulnerability](https://quasar.dev/security/report-a-vulnerability) + +_build_ + +Quasar CLI (with Vite) + +[Upgrade guide\\ +\\ +NEW!](https://quasar.dev/quasar-cli-vite/upgrade-guide) [The quasar.config file](https://quasar.dev/quasar-cli-vite/quasar-config-file) [Convert project to CLI with Vite](https://quasar.dev/quasar-cli-vite/convert-to-quasar-cli-with-vite) [Browser Compatibility](https://quasar.dev/quasar-cli-vite/browser-compatibility) [Supporting TypeScript](https://quasar.dev/quasar-cli-vite/supporting-ts) [Directory Structure](https://quasar.dev/quasar-cli-vite/directory-structure) [Commands List](https://quasar.dev/quasar-cli-vite/commands-list) [CSS Preprocessors](https://quasar.dev/quasar-cli-vite/css-preprocessors) [Routing](https://quasar.dev/quasar-cli-vite/routing) [Lazy Loading - Code Splitting](https://quasar.dev/quasar-cli-vite/lazy-loading) [Handling Assets](https://quasar.dev/quasar-cli-vite/handling-assets) [Boot Files](https://quasar.dev/quasar-cli-vite/boot-files) [Prefetch Feature](https://quasar.dev/quasar-cli-vite/prefetch-feature) [API Proxying](https://quasar.dev/quasar-cli-vite/api-proxying) [Handling Vite](https://quasar.dev/quasar-cli-vite/handling-vite) [Handling process.env](https://quasar.dev/quasar-cli-vite/handling-process-env) [State Management with Pinia](https://quasar.dev/quasar-cli-vite/state-management-with-pinia) [Linter](https://quasar.dev/quasar-cli-vite/linter) [Testing & Auditing](https://quasar.dev/quasar-cli-vite/testing-and-auditing) + +SPA mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-spa/introduction) [App Icons for SPA](https://quasar.dev/quasar-cli-vite/developing-spa/app-icons-spa) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-spa/build-commands) [Deploying](https://quasar.dev/quasar-cli-vite/developing-spa/deploying) + +SSR mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-ssr/introduction) [Writing Universal Code](https://quasar.dev/quasar-cli-vite/developing-ssr/writing-universal-code) [Preparation](https://quasar.dev/quasar-cli-vite/developing-ssr/preparation) [Configuring SSR](https://quasar.dev/quasar-cli-vite/developing-ssr/configuring-ssr) [ssrContext](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-context) [SSR Middleware](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-middleware) [SSR Webserver](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-webserver) [Vue SSR Directives](https://quasar.dev/quasar-cli-vite/developing-ssr/vue-ssr-directives) [App Icons for SSR](https://quasar.dev/quasar-cli-vite/developing-ssr/app-icons-ssr) [SEO for SSR](https://quasar.dev/quasar-cli-vite/developing-ssr/seo-for-ssr) [Client Side Hydration](https://quasar.dev/quasar-cli-vite/developing-ssr/client-side-hydration) [Handling 404 and 500 Errors](https://quasar.dev/quasar-cli-vite/developing-ssr/handling-404-and-500-errors) [SSR with PWA](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-with-pwa) [SSR FAQ](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-frequently-asked-questions) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-ssr/build-commands) [SSR with Typescript](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-with-typescript) [Deploying](https://quasar.dev/quasar-cli-vite/developing-ssr/deploying) + +PWA mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-pwa/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-pwa/preparation) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-pwa/build-commands) [Configuring PWA](https://quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa) [HMR for PWA](https://quasar.dev/quasar-cli-vite/developing-pwa/hmr-for-dev) [App Icons for PWA](https://quasar.dev/quasar-cli-vite/developing-pwa/app-icons-pwa) [Handling Service Worker](https://quasar.dev/quasar-cli-vite/developing-pwa/handling-service-worker) [PWA with Typescript](https://quasar.dev/quasar-cli-vite/developing-pwa/pwa-with-typescript) + +[Developing Mobile Apps](https://quasar.dev/quasar-cli-vite/developing-mobile-apps) + +Capacitor mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/preparation) [Capacitor versions](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/capacitor-version-support) [Configuring Capacitor](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/configuring-capacitor) [App Icons for Capacitor](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/app-icons-capacitor) [Capacitor API](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/capacitor-api) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/publishing-to-store) + +Cordova mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/preparation) [Configuring Cordova](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/configuring-cordova) [App Icons for Cordova](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/app-icons-cordova) [Cordova Plugins](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/cordova-plugins) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/publishing-to-store) + +Electron mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-electron-apps/introduction) [Upgrade guide](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-upgrade-guide) [Preparation](https://quasar.dev/quasar-cli-vite/developing-electron-apps/preparation) [Configuring Electron](https://quasar.dev/quasar-cli-vite/developing-electron-apps/configuring-electron) [App Icons for Electron](https://quasar.dev/quasar-cli-vite/developing-electron-apps/app-icons-electron) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-electron-apps/build-commands) [Preload Script](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-preload-script) [Electron Packages](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-packages) [Accessing files](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-accessing-files) [Frameless Electron Window](https://quasar.dev/quasar-cli-vite/developing-electron-apps/frameless-electron-window) [Electron with Typescript](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-with-typescript) [Electron Security Concerns](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-security-concerns) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-vite/developing-electron-apps/troubleshooting-and-tips) + +Browser Extensions mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/preparation) [Configuring BEX](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex) [App Icons for BEX](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/app-icons-browser-extension) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/build-commands) [Types of BEX](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/types-of-bex) [BEX Bridge Communication](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/bex-bridge) [Background Script](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/background-script) [Content Scripts](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/content-scripts) + +[Ajax Requests](https://quasar.dev/quasar-cli-vite/ajax-requests) [Opening Dev Server To Public](https://quasar.dev/quasar-cli-vite/opening-dev-server-to-public) + +_build_ + +Quasar CLI (with Webpack) + +[Upgrade guide\\ +\\ +NEW!](https://quasar.dev/quasar-cli-webpack/upgrade-guide) [The quasar.config file](https://quasar.dev/quasar-cli-webpack/quasar-config-file) [Convert to CLI with Webpack](https://quasar.dev/quasar-cli-webpack/convert-to-quasar-cli-with-webpack) [Browser Compatibility](https://quasar.dev/quasar-cli-webpack/browser-compatibility) [Supporting TypeScript](https://quasar.dev/quasar-cli-webpack/supporting-ts) [Directory Structure](https://quasar.dev/quasar-cli-webpack/directory-structure) [Commands List](https://quasar.dev/quasar-cli-webpack/commands-list) [CSS Preprocessors](https://quasar.dev/quasar-cli-webpack/css-preprocessors) [Routing](https://quasar.dev/quasar-cli-webpack/routing) [Lazy Loading - Code Splitting](https://quasar.dev/quasar-cli-webpack/lazy-loading) [Handling Assets](https://quasar.dev/quasar-cli-webpack/handling-assets) [Boot Files](https://quasar.dev/quasar-cli-webpack/boot-files) [Prefetch Feature](https://quasar.dev/quasar-cli-webpack/prefetch-feature) [API Proxying](https://quasar.dev/quasar-cli-webpack/api-proxying) [Handling Webpack](https://quasar.dev/quasar-cli-webpack/handling-webpack) [Handling process.env](https://quasar.dev/quasar-cli-webpack/handling-process-env) [State Management with Pinia](https://quasar.dev/quasar-cli-webpack/state-management-with-pinia) [Linter](https://quasar.dev/quasar-cli-webpack/linter) [Testing & Auditing](https://quasar.dev/quasar-cli-webpack/testing-and-auditing) + +SPA mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-spa/introduction) [App Icons for SPA](https://quasar.dev/quasar-cli-webpack/developing-spa/app-icons-spa) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-spa/build-commands) [Deploying](https://quasar.dev/quasar-cli-webpack/developing-spa/deploying) + +SSR mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-ssr/introduction) [Writing Universal Code](https://quasar.dev/quasar-cli-webpack/developing-ssr/writing-universal-code) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-ssr/preparation) [Configuring SSR](https://quasar.dev/quasar-cli-webpack/developing-ssr/configuring-ssr) [ssrContext](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-context) [SSR Middleware](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-middleware) [SSR Webserver](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-webserver) [Vue SSR Directives](https://quasar.dev/quasar-cli-webpack/developing-ssr/vue-ssr-directives) [App Icons for SSR](https://quasar.dev/quasar-cli-webpack/developing-ssr/app-icons-ssr) [SEO for SSR](https://quasar.dev/quasar-cli-webpack/developing-ssr/seo-for-ssr) [Client Side Hydration](https://quasar.dev/quasar-cli-webpack/developing-ssr/client-side-hydration) [Handling 404 and 500 Errors](https://quasar.dev/quasar-cli-webpack/developing-ssr/handling-404-and-500-errors) [SSR with PWA](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-with-pwa) [SSR FAQ](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-frequently-asked-questions) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-ssr/build-commands) [SSR with Typescript](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-with-typescript) [Deploying](https://quasar.dev/quasar-cli-webpack/developing-ssr/deploying) + +PWA mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-pwa/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-pwa/preparation) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-pwa/build-commands) [Configuring PWA](https://quasar.dev/quasar-cli-webpack/developing-pwa/configuring-pwa) [HMR for PWA](https://quasar.dev/quasar-cli-webpack/developing-pwa/hmr-for-dev) [App Icons for PWA](https://quasar.dev/quasar-cli-webpack/developing-pwa/app-icons-pwa) [Handling Service Worker](https://quasar.dev/quasar-cli-webpack/developing-pwa/handling-service-worker) [PWA with Typescript](https://quasar.dev/quasar-cli-webpack/developing-pwa/pwa-with-typescript) + +[Developing Mobile Apps](https://quasar.dev/quasar-cli-webpack/developing-mobile-apps) + +Capacitor mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/preparation) [Capacitor versions](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/capacitor-version-support) [Configuring Capacitor](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/configuring-capacitor) [App Icons for Capacitor](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/app-icons-capacitor) [Capacitor API](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/capacitor-api) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/publishing-to-store) + +Cordova mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/preparation) [Configuring Cordova](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/configuring-cordova) [App Icons for Cordova](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/app-icons-cordova) [Cordova Plugins](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/cordova-plugins) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/publishing-to-store) + +Electron mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/introduction) [Upgrade guide](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-upgrade-guide) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/preparation) [Configuring Electron](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/configuring-electron) [App Icons for Electron](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/app-icons-electron) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/build-commands) [Preload Script](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-preload-script) [Electron Packages](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-packages) [Accessing files](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-accessing-files) [Frameless Electron Window](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/frameless-electron-window) [Electron with Typescript](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-with-typescript) [Electron Security Concerns](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-security-concerns) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/troubleshooting-and-tips) + +Browser Extensions mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/preparation) [Configuring BEX](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/configuring-bex) [App Icons for BEX](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/app-icons-browser-extension) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/build-commands) [Types of BEX](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/types-of-bex) [BEX Bridge Communication](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/bex-bridge) [Background Script](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/background-script) [Content Scripts](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/content-scripts) + +[Ajax Requests](https://quasar.dev/quasar-cli-webpack/ajax-requests) [Opening Dev Server To Public](https://quasar.dev/quasar-cli-webpack/opening-dev-server-to-public) + +_stars_ + +Icon Genie CLI + +[Introduction](https://quasar.dev/icongenie/introduction) [Installation / Upgrade notes](https://quasar.dev/icongenie/installation) [Command list](https://quasar.dev/icongenie/command-list) [App Icons List](https://quasar.dev/icongenie/app-icons-list) [Profile files](https://quasar.dev/icongenie/profile-files) + +_note\_add_ + +App Extensions + +[Introduction](https://quasar.dev/app-extensions/introduction) [Discover App Extensions](https://quasar.dev/app-extensions/discover) + +Development Guide + +[Introduction](https://quasar.dev/app-extensions/development-guide/introduction) [Prompts API](https://quasar.dev/app-extensions/development-guide/prompts-api) [Install API](https://quasar.dev/app-extensions/development-guide/install-api) [Index API](https://quasar.dev/app-extensions/development-guide/index-api) [Uninstall API](https://quasar.dev/app-extensions/development-guide/uninstall-api) + +Tips and Tricks + +[Introduction](https://quasar.dev/app-extensions/tips-and-tricks/introduction) [Provide a UI component](https://quasar.dev/app-extensions/tips-and-tricks/provide-a-ui-component) [Provide a directive](https://quasar.dev/app-extensions/tips-and-tricks/provide-a-directive) [Inject Quasar Plugin](https://quasar.dev/app-extensions/tips-and-tricks/inject-quasar-plugin) [Starter kit equivalent](https://quasar.dev/app-extensions/tips-and-tricks/starter-kit-equivalent) [Chain Webpack](https://quasar.dev/app-extensions/tips-and-tricks/chain-webpack) + +_healing_ + +Quasar Utils + +[Date Utils](https://quasar.dev/quasar-utils/date-utils) [Color Utils](https://quasar.dev/quasar-utils/color-utils) [DOM Utils](https://quasar.dev/quasar-utils/dom-utils) [Morph Utils](https://quasar.dev/quasar-utils/morph-utils) [Formatter Utils](https://quasar.dev/quasar-utils/formatter-utils) [Scrolling Utils](https://quasar.dev/quasar-utils/scrolling-utils) [Type Checking Utils](https://quasar.dev/quasar-utils/type-checking-utils) [EventBus Util](https://quasar.dev/quasar-utils/event-bus-util) [Other Utils](https://quasar.dev/quasar-utils/other-utils) + +Grid Gutter + +[Flex Grid\\ +\\ +Introduction to Flexbox](https://quasar.dev/layout/grid/introduction-to-flexbox) [Flex Grid\\ +\\ +Grid Row](https://quasar.dev/layout/grid/row) [Flex Grid\\ +\\ +Grid Column](https://quasar.dev/layout/grid/column) [Flex Grid\\ +\\ +Flex Playground](https://quasar.dev/layout/grid/flex-playground) + +In the hope that you’ve previously read the [Introduction to Flexbox](https://quasar.dev/layout/grid/introduction-to-flexbox) theory, let’s get deeper into Gutters. + +Gutter Quasar CSS classes offer an easy way to space out elements (especially in a [Grid Row](https://quasar.dev/layout/grid/row)) one from each other at equal distance. + +## Types + +There are two main types of gutters depending on your use-case: `q-gutter-{size}` and `q-col-gutter-{size}`. The first is to be used when the elements that you want to distance one from each other don’t use `col-*` or `offset-*` classes that specify a width, and the latter is to be used when they do have `col-*` or `offset-*` classes specifying a width. + +TIP + +Suffixes ( `-none`, `-xs`, `-sm`, `-md`, `-lg`, `-xl`) do not refer to device screen size, but to the size of gutter between elements. + +## Classes “q-gutter-{size}” + +WARNING + +The `q-gutter-*` classes apply a **negative top and left margins** to the parent and a **positive top and left margins** to the children. Take this into account when working with the other [Spacing classes](https://quasar.dev/style/spacing) so as to not to break the gutter’s css. + +These classes are to be used when the direct children don’t have `col-*` or `offset-*` classes specifying a width. + +Sizes for q-gutter + +* * * + +_code_ + +Template + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +q-gutter-xs + +ButtonButtonButtonButtonButtonButtonButton + +q-gutter-sm + +ButtonButtonButtonButtonButtonButtonButton + +q-gutter-md + +ButtonButtonButtonButtonButtonButtonButton + +q-gutter-lg + +ButtonButtonButtonButtonButtonButtonButton + +q-gutter-xl + +ButtonButtonButtonButtonButtonButtonButton + +There’s also the `q-gutter-none` class (equivalent to: no gutter applied) which wasn’t included in the example above. + +Horizontal only q-gutter + +* * * + +_code_ + +Template + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +ButtonButtonButton + +Vertical only q-gutter + +* * * + +_code_ + +Template + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +ButtonButtonButtonButtonButtonButtonButtonButtonButtonButton + +Mixed horizontal and vertical q-gutter + +* * * + +_code_ + +Template + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +ButtonButtonButtonButtonButtonButtonButtonButtonButtonButton + +## Classes “q-col-gutter-{size}” + +WARNING + +The `q-col-gutter-*` classes apply a **negative top and left margins** to the parent and a **positive top and left paddings** to the children. Take this into account when working with the other [Spacing classes](https://quasar.dev/style/spacing) so as to not to break the gutter’s css. + +These classes are to be used when the direct children have `col-*` or `offset-*` classes that specify a width. + +Sizes for q-col-gutter + +* * * + +_code_ + +Template + +Style + +All + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +* * * + +* * * + +* * * + +* * * + +* * * + +Horizontal only q-col-gutter + +* * * + +_code_ + +Template + +Style + +All + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +Vertical only q-col-gutter + +* * * + +_code_ + +Template + +Style + +All + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +Mixed horizontal and vertical q-col-gutter + +* * * + +_code_ + +Template + +Style + +All + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +## Pros, cons and how to workaround problems - “q-gutter-{size}” vs. “q-col-gutter-{size}” + +Both set of classes have pros and cons. + +WARNING + +Because both `q-gutter-*` and `q-col-gutter-*` classes apply a **negative top and left margins** to the parent you should not apply styling targeting background, margin or border related properties on the parent. + +Instead you need to wrap them in a container, apply the styling on the container, and add `overflow-auto` or `row` class **on the container** + +Parent styling + +* * * + +_code_ + +Template + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +Styling on parent + +Amber block + +C + +C + +C + +C + +Styling on wrapper - .row + +Amber block + +C + +C + +C + +C + +Styling on wrapper - .overflow-auto + +Amber block + +C + +C + +C + +C + +TIP + +The `q-gutter-*` classes **do not change** the internal dimensions of the children, so you can use `background` or `border` directly on children. + +WARNING + +The `q-col-gutter-*` classes **do change** the external dimensions of the children, so you cannot use `col-*` or `offset-*` classes specifying a width on children anymore. + +Children size compare + +* * * + +_code_ + +Template + +Style + +All + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +.q-gutter and unsized children + +Child + +Child + +Child + +Child + +Child + +Child + +Child + +* * * + +.q-col-gutter and unsized children + +Child + +Child + +Child + +Child + +Child + +Child + +Child + +* * * + +.q-gutter and .col-6 sized children - 2 .col-6 adds up to **more than 100%** + +Child + +Child + +Child + +Child + +Child + +* * * + +.q-col-gutter and .col-6 sized children - 2 .col-6 adds up to **100%** + +Child + +Child + +Child + +Child + +Child + +WARNING + +Because `q-col-gutter-*` classes apply a **negative top and left padding** to the children you should not apply styling targeting background, padding or border related properties on the children. Instead you need to put the styled element inside the child and apply the styling on that element. + +Children styling + +* * * + +_code_ + +Template + +Style + +All + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +.q-col-gutter with styling on children + +Child + +Child + +Child + +Child + +Child + +* * * + +.q-col-gutter with styling on the element inside children + +Child + +Child + +Child + +Child + +Child + +* * * + +.q-col-gutter with direct QBtn children + +ButtonButtonButtonButtonButton + +* * * + +.q-col-gutter with QBtn inside children + +Button + +Button + +Button + +Button + +Button + +## Flex Grid Playground + +To see the Flex in action, you can use the Flex Playground to interactively learn more. + +[Flex Playground _launch_](https://quasar.dev/layout/grid/flex-playground) + +Ready for more? + +[Flex Grid\\ +\\ +Grid Column](https://quasar.dev/layout/grid/column) [Flex Grid\\ +\\ +Flexbox patterns](https://quasar.dev/layout/grid/flexbox-patterns) + +* * * + +Caught a mistake? [Edit this page in browser](https://github.com/quasarframework/quasar/edit/dev/docs/src/pages/layout/grid/gutter.md) + +1\. Introduction + +2\. Types + +3\. Classes “q-gutter-{size}” + +4\. Classes “q-col-gutter-{size}” + +5\. Pros, cons and how to workaround problems - “q-gutter-{size}” vs. “q-col-gutter-{size}” + +6\. Flex Grid Playground + +[MIT License](https://github.com/quasarframework/quasar/blob/dev/LICENSE) [Privacy Policy](https://www.iubenda.com/privacy-policy/40685560) + +Copyright © 2015-present PULSARDEV SRL, [Razvan Stoenescu](https://github.com/rstoenescu) + +This website has been designed in collaboration with [Dreamonkey Srl](https://www.dreamonkey.com/) + +Our third-party tools use cookies, which are necessary for its functioning and required to achieve the purposes illustrated in the cookie policy. + +AcceptLearn more + +## Vue Spinners Overview +[_assignment\_late_\\ +\\ +Why donate](https://quasar.dev/why-donate) [_travel\_explore_\\ +\\ +API Explorer](https://quasar.dev/api-explorer) + +_code_ + +How to contribute + +[Contribution Guide](https://quasar.dev/how-to-contribute/contribution-guide) [Running Projects](https://quasar.dev/how-to-contribute/running-projects) [Start a New Project](https://quasar.dev/how-to-contribute/new-project) [Project Maintainer Role](https://quasar.dev/how-to-contribute/project-maintainer) [Commit Conventions](https://quasar.dev/how-to-contribute/commit-conventions) + +_tune_ + +Options & Helpers + +[The $q object](https://quasar.dev/options/the-q-object) [App Icons](https://quasar.dev/options/app-icons) [SEO](https://quasar.dev/options/seo) [Quasar Language Packs](https://quasar.dev/options/quasar-language-packs) [App Internationalization](https://quasar.dev/options/app-internationalization) [RTL Support](https://quasar.dev/options/rtl-support) [Installing Icon Libraries](https://quasar.dev/options/installing-icon-libraries) [Quasar Icon Sets](https://quasar.dev/options/quasar-icon-sets) [Platform Detection](https://quasar.dev/options/platform-detection) [Screen Plugin](https://quasar.dev/options/screen-plugin) [Animations](https://quasar.dev/options/animations) [Transitions](https://quasar.dev/options/transitions) + +_style_ + +Style & Identity + +[Typography](https://quasar.dev/style/typography) [Color Palette](https://quasar.dev/style/color-palette) [Theme Builder](https://quasar.dev/style/theme-builder) [Dark Mode](https://quasar.dev/style/dark-mode) [Spacing](https://quasar.dev/style/spacing) [Shadows](https://quasar.dev/style/shadows) [Breakpoints](https://quasar.dev/style/breakpoints) [Body classes](https://quasar.dev/style/body-classes) [Visibility](https://quasar.dev/style/visibility) [Positioning](https://quasar.dev/style/positioning) [Sass/SCSS Variables](https://quasar.dev/style/sass-scss-variables) [Other Helper Classes](https://quasar.dev/style/other-helper-classes) + +_view\_quilt_ + +Layout and Grid + +Flex Grid + +[Introduction to Flexbox](https://quasar.dev/layout/grid/introduction-to-flexbox) [Grid Row](https://quasar.dev/layout/grid/row) [Grid Column](https://quasar.dev/layout/grid/column) [Grid Gutter](https://quasar.dev/layout/grid/gutter) [Flexbox patterns](https://quasar.dev/layout/grid/flexbox-patterns) [Flex Playground](https://quasar.dev/layout/grid/flex-playground) + +[Layout](https://quasar.dev/layout/layout) [Routing with Layouts and Pages](https://quasar.dev/layout/routing-with-layouts-and-pages) [Layout Header and Footer](https://quasar.dev/layout/header-and-footer) [Layout Drawer](https://quasar.dev/layout/drawer) [Layout Page](https://quasar.dev/layout/page) [Layout Builder](https://quasar.dev/layout-builder) [Layout Gallery](https://quasar.dev/layout/gallery) [Page Sticky](https://quasar.dev/layout/page-sticky) [Page Scroller](https://quasar.dev/layout/page-scroller) + +_widgets_ + +Vue Components + +[Ajax Bar](https://quasar.dev/vue-components/ajax-bar) [Avatar](https://quasar.dev/vue-components/avatar) [Badge](https://quasar.dev/vue-components/badge) [Banner](https://quasar.dev/vue-components/banner) [Bar](https://quasar.dev/vue-components/bar) [Breadcrumbs](https://quasar.dev/vue-components/breadcrumbs) + +Buttons + +[Button](https://quasar.dev/vue-components/button) [Button Group](https://quasar.dev/vue-components/button-group) [Button Dropdown](https://quasar.dev/vue-components/button-dropdown) + +[Card](https://quasar.dev/vue-components/card) [Carousel](https://quasar.dev/vue-components/carousel) [Chat Message](https://quasar.dev/vue-components/chat) [Chip](https://quasar.dev/vue-components/chip) [Circular Progress](https://quasar.dev/vue-components/circular-progress) [Color Picker](https://quasar.dev/vue-components/color-picker) [Dialog](https://quasar.dev/vue-components/dialog) [Editor - WYSIWYG](https://quasar.dev/vue-components/editor) [Expansion Item](https://quasar.dev/vue-components/expansion-item) [Floating Action Button](https://quasar.dev/vue-components/floating-action-button) + +Form Components + +[Input Textfield](https://quasar.dev/vue-components/input) [Select](https://quasar.dev/vue-components/select) [File picker](https://quasar.dev/vue-components/file) [Form](https://quasar.dev/vue-components/form) [Field (wrapper)](https://quasar.dev/vue-components/field) [Radio](https://quasar.dev/vue-components/radio) [Checkbox](https://quasar.dev/vue-components/checkbox) [Toggle](https://quasar.dev/vue-components/toggle) [Button Toggle](https://quasar.dev/vue-components/button-toggle) [Option Group](https://quasar.dev/vue-components/option-group) [Slider](https://quasar.dev/vue-components/slider) [Range](https://quasar.dev/vue-components/range) [Time Picker](https://quasar.dev/vue-components/time) [Date Picker](https://quasar.dev/vue-components/date) + +[Icon](https://quasar.dev/vue-components/icon) [Img](https://quasar.dev/vue-components/img) [Infinite Scroll](https://quasar.dev/vue-components/infinite-scroll) [Inner Loading](https://quasar.dev/vue-components/inner-loading) [Intersection](https://quasar.dev/vue-components/intersection) [Knob](https://quasar.dev/vue-components/knob) [Linear Progress](https://quasar.dev/vue-components/linear-progress) [List & List Items](https://quasar.dev/vue-components/list-and-list-items) [Markup Table](https://quasar.dev/vue-components/markup-table) [Menu](https://quasar.dev/vue-components/menu) [No SSR](https://quasar.dev/vue-components/no-ssr) + +Observers + +[Resize Observer (for Element)](https://quasar.dev/vue-components/resize-observer) [Scroll Observer](https://quasar.dev/vue-components/scroll-observer) + +[Pagination](https://quasar.dev/vue-components/pagination) [Parallax](https://quasar.dev/vue-components/parallax) [Popup Edit](https://quasar.dev/vue-components/popup-edit) [Popup Proxy](https://quasar.dev/vue-components/popup-proxy) [Pull to refresh](https://quasar.dev/vue-components/pull-to-refresh) [Rating](https://quasar.dev/vue-components/rating) [Responsive](https://quasar.dev/vue-components/responsive) [Scroll Area](https://quasar.dev/vue-components/scroll-area) [Separator](https://quasar.dev/vue-components/separator) [Skeleton](https://quasar.dev/vue-components/skeleton) [Slide Item](https://quasar.dev/vue-components/slide-item) [Slide Transition](https://quasar.dev/vue-components/slide-transition) [Space](https://quasar.dev/vue-components/space) [Spinners](https://quasar.dev/vue-components/spinners) [Splitter](https://quasar.dev/vue-components/splitter) [Stepper](https://quasar.dev/vue-components/stepper) [Table](https://quasar.dev/vue-components/table) [Tabs](https://quasar.dev/vue-components/tabs) [Tab Panels](https://quasar.dev/vue-components/tab-panels) [Timeline](https://quasar.dev/vue-components/timeline) [Toolbar](https://quasar.dev/vue-components/toolbar) [Tooltip](https://quasar.dev/vue-components/tooltip) [Tree](https://quasar.dev/vue-components/tree) [Uploader](https://quasar.dev/vue-components/uploader) [Video](https://quasar.dev/vue-components/video) [Virtual Scroll](https://quasar.dev/vue-components/virtual-scroll) + +_swap\_calls_ + +Vue Directives + +[Close Popup](https://quasar.dev/vue-directives/close-popup) [Intersection](https://quasar.dev/vue-directives/intersection) [Material Ripples](https://quasar.dev/vue-directives/material-ripples) [Mutation](https://quasar.dev/vue-directives/mutation) [Morph](https://quasar.dev/vue-directives/morph) [Scroll](https://quasar.dev/vue-directives/scroll) [Scroll Fire](https://quasar.dev/vue-directives/scroll-fire) [Touch Hold](https://quasar.dev/vue-directives/touch-hold) [Touch Pan](https://quasar.dev/vue-directives/touch-pan) [Touch Repeat](https://quasar.dev/vue-directives/touch-repeat) [Touch Swipe](https://quasar.dev/vue-directives/touch-swipe) + +_extension_ + +Quasar Plugins + +[Addressbar Color](https://quasar.dev/quasar-plugins/addressbar-color) [App Fullscreen](https://quasar.dev/quasar-plugins/app-fullscreen) [App Visibility](https://quasar.dev/quasar-plugins/app-visibility) [Bottom Sheet](https://quasar.dev/quasar-plugins/bottom-sheet) [Cookies](https://quasar.dev/quasar-plugins/cookies) [Dark](https://quasar.dev/quasar-plugins/dark) [Dialog](https://quasar.dev/quasar-plugins/dialog) [Loading](https://quasar.dev/quasar-plugins/loading) [Loading Bar](https://quasar.dev/quasar-plugins/loading-bar) [Local/Session Storage](https://quasar.dev/quasar-plugins/web-storage) [Meta](https://quasar.dev/quasar-plugins/meta) [Notify](https://quasar.dev/quasar-plugins/notify) + +_developer\_mode_ + +Vue Composables + +[useQuasar](https://quasar.dev/vue-composables/use-quasar) [useDialogPluginComponent](https://quasar.dev/vue-composables/use-dialog-plugin-component) [useFormChild](https://quasar.dev/vue-composables/use-form-child) [useMeta](https://quasar.dev/vue-composables/use-meta) [useHydration\\ +\\ +new](https://quasar.dev/vue-composables/use-hydration) [useId\\ +\\ +new](https://quasar.dev/vue-composables/use-id) [useInterval\\ +\\ +new](https://quasar.dev/vue-composables/use-interval) [useRenderCache\\ +\\ +new](https://quasar.dev/vue-composables/use-render-cache) [useTick\\ +\\ +new](https://quasar.dev/vue-composables/use-tick) [useTimeout\\ +\\ +new](https://quasar.dev/vue-composables/use-timeout) [useSplitAttrs\\ +\\ +new](https://quasar.dev/vue-composables/use-split-attrs) + +_security_ + +Security + +[DO's and DON'Ts](https://quasar.dev/security/dos-and-donts) [Report a vulnerability](https://quasar.dev/security/report-a-vulnerability) + +_build_ + +Quasar CLI (with Vite) + +[Upgrade guide\\ +\\ +NEW!](https://quasar.dev/quasar-cli-vite/upgrade-guide) [The quasar.config file](https://quasar.dev/quasar-cli-vite/quasar-config-file) [Convert project to CLI with Vite](https://quasar.dev/quasar-cli-vite/convert-to-quasar-cli-with-vite) [Browser Compatibility](https://quasar.dev/quasar-cli-vite/browser-compatibility) [Supporting TypeScript](https://quasar.dev/quasar-cli-vite/supporting-ts) [Directory Structure](https://quasar.dev/quasar-cli-vite/directory-structure) [Commands List](https://quasar.dev/quasar-cli-vite/commands-list) [CSS Preprocessors](https://quasar.dev/quasar-cli-vite/css-preprocessors) [Routing](https://quasar.dev/quasar-cli-vite/routing) [Lazy Loading - Code Splitting](https://quasar.dev/quasar-cli-vite/lazy-loading) [Handling Assets](https://quasar.dev/quasar-cli-vite/handling-assets) [Boot Files](https://quasar.dev/quasar-cli-vite/boot-files) [Prefetch Feature](https://quasar.dev/quasar-cli-vite/prefetch-feature) [API Proxying](https://quasar.dev/quasar-cli-vite/api-proxying) [Handling Vite](https://quasar.dev/quasar-cli-vite/handling-vite) [Handling process.env](https://quasar.dev/quasar-cli-vite/handling-process-env) [State Management with Pinia](https://quasar.dev/quasar-cli-vite/state-management-with-pinia) [Linter](https://quasar.dev/quasar-cli-vite/linter) [Testing & Auditing](https://quasar.dev/quasar-cli-vite/testing-and-auditing) + +SPA mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-spa/introduction) [App Icons for SPA](https://quasar.dev/quasar-cli-vite/developing-spa/app-icons-spa) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-spa/build-commands) [Deploying](https://quasar.dev/quasar-cli-vite/developing-spa/deploying) + +SSR mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-ssr/introduction) [Writing Universal Code](https://quasar.dev/quasar-cli-vite/developing-ssr/writing-universal-code) [Preparation](https://quasar.dev/quasar-cli-vite/developing-ssr/preparation) [Configuring SSR](https://quasar.dev/quasar-cli-vite/developing-ssr/configuring-ssr) [ssrContext](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-context) [SSR Middleware](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-middleware) [SSR Webserver](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-webserver) [Vue SSR Directives](https://quasar.dev/quasar-cli-vite/developing-ssr/vue-ssr-directives) [App Icons for SSR](https://quasar.dev/quasar-cli-vite/developing-ssr/app-icons-ssr) [SEO for SSR](https://quasar.dev/quasar-cli-vite/developing-ssr/seo-for-ssr) [Client Side Hydration](https://quasar.dev/quasar-cli-vite/developing-ssr/client-side-hydration) [Handling 404 and 500 Errors](https://quasar.dev/quasar-cli-vite/developing-ssr/handling-404-and-500-errors) [SSR with PWA](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-with-pwa) [SSR FAQ](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-frequently-asked-questions) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-ssr/build-commands) [SSR with Typescript](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-with-typescript) [Deploying](https://quasar.dev/quasar-cli-vite/developing-ssr/deploying) + +PWA mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-pwa/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-pwa/preparation) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-pwa/build-commands) [Configuring PWA](https://quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa) [HMR for PWA](https://quasar.dev/quasar-cli-vite/developing-pwa/hmr-for-dev) [App Icons for PWA](https://quasar.dev/quasar-cli-vite/developing-pwa/app-icons-pwa) [Handling Service Worker](https://quasar.dev/quasar-cli-vite/developing-pwa/handling-service-worker) [PWA with Typescript](https://quasar.dev/quasar-cli-vite/developing-pwa/pwa-with-typescript) + +[Developing Mobile Apps](https://quasar.dev/quasar-cli-vite/developing-mobile-apps) + +Capacitor mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/preparation) [Capacitor versions](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/capacitor-version-support) [Configuring Capacitor](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/configuring-capacitor) [App Icons for Capacitor](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/app-icons-capacitor) [Capacitor API](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/capacitor-api) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/publishing-to-store) + +Cordova mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/preparation) [Configuring Cordova](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/configuring-cordova) [App Icons for Cordova](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/app-icons-cordova) [Cordova Plugins](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/cordova-plugins) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/publishing-to-store) + +Electron mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-electron-apps/introduction) [Upgrade guide](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-upgrade-guide) [Preparation](https://quasar.dev/quasar-cli-vite/developing-electron-apps/preparation) [Configuring Electron](https://quasar.dev/quasar-cli-vite/developing-electron-apps/configuring-electron) [App Icons for Electron](https://quasar.dev/quasar-cli-vite/developing-electron-apps/app-icons-electron) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-electron-apps/build-commands) [Preload Script](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-preload-script) [Electron Packages](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-packages) [Accessing files](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-accessing-files) [Frameless Electron Window](https://quasar.dev/quasar-cli-vite/developing-electron-apps/frameless-electron-window) [Electron with Typescript](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-with-typescript) [Electron Security Concerns](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-security-concerns) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-vite/developing-electron-apps/troubleshooting-and-tips) + +Browser Extensions mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/preparation) [Configuring BEX](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex) [App Icons for BEX](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/app-icons-browser-extension) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/build-commands) [Types of BEX](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/types-of-bex) [BEX Bridge Communication](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/bex-bridge) [Background Script](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/background-script) [Content Scripts](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/content-scripts) + +[Ajax Requests](https://quasar.dev/quasar-cli-vite/ajax-requests) [Opening Dev Server To Public](https://quasar.dev/quasar-cli-vite/opening-dev-server-to-public) + +_build_ + +Quasar CLI (with Webpack) + +[Upgrade guide\\ +\\ +NEW!](https://quasar.dev/quasar-cli-webpack/upgrade-guide) [The quasar.config file](https://quasar.dev/quasar-cli-webpack/quasar-config-file) [Convert to CLI with Webpack](https://quasar.dev/quasar-cli-webpack/convert-to-quasar-cli-with-webpack) [Browser Compatibility](https://quasar.dev/quasar-cli-webpack/browser-compatibility) [Supporting TypeScript](https://quasar.dev/quasar-cli-webpack/supporting-ts) [Directory Structure](https://quasar.dev/quasar-cli-webpack/directory-structure) [Commands List](https://quasar.dev/quasar-cli-webpack/commands-list) [CSS Preprocessors](https://quasar.dev/quasar-cli-webpack/css-preprocessors) [Routing](https://quasar.dev/quasar-cli-webpack/routing) [Lazy Loading - Code Splitting](https://quasar.dev/quasar-cli-webpack/lazy-loading) [Handling Assets](https://quasar.dev/quasar-cli-webpack/handling-assets) [Boot Files](https://quasar.dev/quasar-cli-webpack/boot-files) [Prefetch Feature](https://quasar.dev/quasar-cli-webpack/prefetch-feature) [API Proxying](https://quasar.dev/quasar-cli-webpack/api-proxying) [Handling Webpack](https://quasar.dev/quasar-cli-webpack/handling-webpack) [Handling process.env](https://quasar.dev/quasar-cli-webpack/handling-process-env) [State Management with Pinia](https://quasar.dev/quasar-cli-webpack/state-management-with-pinia) [Linter](https://quasar.dev/quasar-cli-webpack/linter) [Testing & Auditing](https://quasar.dev/quasar-cli-webpack/testing-and-auditing) + +SPA mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-spa/introduction) [App Icons for SPA](https://quasar.dev/quasar-cli-webpack/developing-spa/app-icons-spa) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-spa/build-commands) [Deploying](https://quasar.dev/quasar-cli-webpack/developing-spa/deploying) + +SSR mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-ssr/introduction) [Writing Universal Code](https://quasar.dev/quasar-cli-webpack/developing-ssr/writing-universal-code) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-ssr/preparation) [Configuring SSR](https://quasar.dev/quasar-cli-webpack/developing-ssr/configuring-ssr) [ssrContext](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-context) [SSR Middleware](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-middleware) [SSR Webserver](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-webserver) [Vue SSR Directives](https://quasar.dev/quasar-cli-webpack/developing-ssr/vue-ssr-directives) [App Icons for SSR](https://quasar.dev/quasar-cli-webpack/developing-ssr/app-icons-ssr) [SEO for SSR](https://quasar.dev/quasar-cli-webpack/developing-ssr/seo-for-ssr) [Client Side Hydration](https://quasar.dev/quasar-cli-webpack/developing-ssr/client-side-hydration) [Handling 404 and 500 Errors](https://quasar.dev/quasar-cli-webpack/developing-ssr/handling-404-and-500-errors) [SSR with PWA](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-with-pwa) [SSR FAQ](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-frequently-asked-questions) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-ssr/build-commands) [SSR with Typescript](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-with-typescript) [Deploying](https://quasar.dev/quasar-cli-webpack/developing-ssr/deploying) + +PWA mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-pwa/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-pwa/preparation) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-pwa/build-commands) [Configuring PWA](https://quasar.dev/quasar-cli-webpack/developing-pwa/configuring-pwa) [HMR for PWA](https://quasar.dev/quasar-cli-webpack/developing-pwa/hmr-for-dev) [App Icons for PWA](https://quasar.dev/quasar-cli-webpack/developing-pwa/app-icons-pwa) [Handling Service Worker](https://quasar.dev/quasar-cli-webpack/developing-pwa/handling-service-worker) [PWA with Typescript](https://quasar.dev/quasar-cli-webpack/developing-pwa/pwa-with-typescript) + +[Developing Mobile Apps](https://quasar.dev/quasar-cli-webpack/developing-mobile-apps) + +Capacitor mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/preparation) [Capacitor versions](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/capacitor-version-support) [Configuring Capacitor](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/configuring-capacitor) [App Icons for Capacitor](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/app-icons-capacitor) [Capacitor API](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/capacitor-api) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/publishing-to-store) + +Cordova mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/preparation) [Configuring Cordova](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/configuring-cordova) [App Icons for Cordova](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/app-icons-cordova) [Cordova Plugins](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/cordova-plugins) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/publishing-to-store) + +Electron mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/introduction) [Upgrade guide](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-upgrade-guide) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/preparation) [Configuring Electron](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/configuring-electron) [App Icons for Electron](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/app-icons-electron) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/build-commands) [Preload Script](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-preload-script) [Electron Packages](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-packages) [Accessing files](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-accessing-files) [Frameless Electron Window](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/frameless-electron-window) [Electron with Typescript](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-with-typescript) [Electron Security Concerns](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-security-concerns) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/troubleshooting-and-tips) + +Browser Extensions mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/preparation) [Configuring BEX](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/configuring-bex) [App Icons for BEX](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/app-icons-browser-extension) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/build-commands) [Types of BEX](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/types-of-bex) [BEX Bridge Communication](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/bex-bridge) [Background Script](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/background-script) [Content Scripts](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/content-scripts) + +[Ajax Requests](https://quasar.dev/quasar-cli-webpack/ajax-requests) [Opening Dev Server To Public](https://quasar.dev/quasar-cli-webpack/opening-dev-server-to-public) + +_stars_ + +Icon Genie CLI + +[Introduction](https://quasar.dev/icongenie/introduction) [Installation / Upgrade notes](https://quasar.dev/icongenie/installation) [Command list](https://quasar.dev/icongenie/command-list) [App Icons List](https://quasar.dev/icongenie/app-icons-list) [Profile files](https://quasar.dev/icongenie/profile-files) + +_note\_add_ + +App Extensions + +[Introduction](https://quasar.dev/app-extensions/introduction) [Discover App Extensions](https://quasar.dev/app-extensions/discover) + +Development Guide + +[Introduction](https://quasar.dev/app-extensions/development-guide/introduction) [Prompts API](https://quasar.dev/app-extensions/development-guide/prompts-api) [Install API](https://quasar.dev/app-extensions/development-guide/install-api) [Index API](https://quasar.dev/app-extensions/development-guide/index-api) [Uninstall API](https://quasar.dev/app-extensions/development-guide/uninstall-api) + +Tips and Tricks + +[Introduction](https://quasar.dev/app-extensions/tips-and-tricks/introduction) [Provide a UI component](https://quasar.dev/app-extensions/tips-and-tricks/provide-a-ui-component) [Provide a directive](https://quasar.dev/app-extensions/tips-and-tricks/provide-a-directive) [Inject Quasar Plugin](https://quasar.dev/app-extensions/tips-and-tricks/inject-quasar-plugin) [Starter kit equivalent](https://quasar.dev/app-extensions/tips-and-tricks/starter-kit-equivalent) [Chain Webpack](https://quasar.dev/app-extensions/tips-and-tricks/chain-webpack) + +_healing_ + +Quasar Utils + +[Date Utils](https://quasar.dev/quasar-utils/date-utils) [Color Utils](https://quasar.dev/quasar-utils/color-utils) [DOM Utils](https://quasar.dev/quasar-utils/dom-utils) [Morph Utils](https://quasar.dev/quasar-utils/morph-utils) [Formatter Utils](https://quasar.dev/quasar-utils/formatter-utils) [Scrolling Utils](https://quasar.dev/quasar-utils/scrolling-utils) [Type Checking Utils](https://quasar.dev/quasar-utils/type-checking-utils) [EventBus Util](https://quasar.dev/quasar-utils/event-bus-util) [Other Utils](https://quasar.dev/quasar-utils/other-utils) + +Spinners + +[Vue Components\\ +\\ +Linear Progress](https://quasar.dev/vue-components/linear-progress) [Vue Components\\ +\\ +Circular Progress](https://quasar.dev/vue-components/circular-progress) [Vue Components\\ +\\ +Skeleton](https://quasar.dev/vue-components/skeleton) [Vue Components\\ +\\ +Inner Loading](https://quasar.dev/vue-components/inner-loading) [Quasar Plugins\\ +\\ +Loading](https://quasar.dev/quasar-plugins/loading) [Quasar Plugins\\ +\\ +Loading Bar](https://quasar.dev/quasar-plugins/loading-bar) + +A Spinner is used to show the user a timely process is currently taking place. It is an important UX feature, which gives the user the feeling the system is continuing to work for longer term activities, like grabbing data from the server or some heavy calculations. + +QSpinner API + +props + +3 + +* * * + +size + +: String \| Number + +Description + +Size in CSS units, including unit name or standard size name (xs\|sm\|md\|lg\|xl) + +color + +: String + +Description + +Color name for component from the Quasar Color Palette + +thickness + +: Number + +Description + +Override value to use for stroke-width + +TIP + +The API below applies to all spinners, except for QSpinner. Making an example with QSpinnerCube. + +QSpinnerCube API + +props + +2 + +* * * + +size + +: String \| Number + +Description + +Size in CSS units, including unit name or standard size name (xs\|sm\|md\|lg\|xl) + +color + +: String + +Description + +Color name for component from the Quasar Color Palette + +## Usage + +QSpinner + +* * * + +_code_ + +Template + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +In the example below, hover over the spinners to see their names. + +Other spinners + +* * * + +_code_ + +Template + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +Coloring + +* * * + +_code_ + +Template + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +Please note that by default, QSpinner and all other spinners inherit the font-size of the parent and applies it as its size. + +Size + +* * * + +_code_ + +Template + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +Standard sizes + +* * * + +_code_ + +Template + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +Ready for more? + +[Vue Components\\ +\\ +Space](https://quasar.dev/vue-components/space) [Vue Components\\ +\\ +Splitter](https://quasar.dev/vue-components/splitter) + +* * * + +Caught a mistake? [Edit this page in browser](https://github.com/quasarframework/quasar/edit/dev/docs/src/pages/vue-components/spinners.md) + +1\. Introduction + +2\. QSpinner API + +3\. QSpinnerCube API + +4\. Usage + +[MIT License](https://github.com/quasarframework/quasar/blob/dev/LICENSE) [Privacy Policy](https://www.iubenda.com/privacy-policy/40685560) + +Copyright © 2015-present PULSARDEV SRL, [Razvan Stoenescu](https://github.com/rstoenescu) + +This website has been designed in collaboration with [Dreamonkey Srl](https://www.dreamonkey.com/) + +Our third-party tools use cookies, which are necessary for its functioning and required to achieve the purposes illustrated in the cookie policy. + +AcceptLearn more + +## QMenu Component Overview +[_assignment\_late_\\ +\\ +Why donate](https://quasar.dev/why-donate) [_travel\_explore_\\ +\\ +API Explorer](https://quasar.dev/api-explorer) + +_code_ + +How to contribute + +[Contribution Guide](https://quasar.dev/how-to-contribute/contribution-guide) [Running Projects](https://quasar.dev/how-to-contribute/running-projects) [Start a New Project](https://quasar.dev/how-to-contribute/new-project) [Project Maintainer Role](https://quasar.dev/how-to-contribute/project-maintainer) [Commit Conventions](https://quasar.dev/how-to-contribute/commit-conventions) + +_tune_ + +Options & Helpers + +[The $q object](https://quasar.dev/options/the-q-object) [App Icons](https://quasar.dev/options/app-icons) [SEO](https://quasar.dev/options/seo) [Quasar Language Packs](https://quasar.dev/options/quasar-language-packs) [App Internationalization](https://quasar.dev/options/app-internationalization) [RTL Support](https://quasar.dev/options/rtl-support) [Installing Icon Libraries](https://quasar.dev/options/installing-icon-libraries) [Quasar Icon Sets](https://quasar.dev/options/quasar-icon-sets) [Platform Detection](https://quasar.dev/options/platform-detection) [Screen Plugin](https://quasar.dev/options/screen-plugin) [Animations](https://quasar.dev/options/animations) [Transitions](https://quasar.dev/options/transitions) + +_style_ + +Style & Identity + +[Typography](https://quasar.dev/style/typography) [Color Palette](https://quasar.dev/style/color-palette) [Theme Builder](https://quasar.dev/style/theme-builder) [Dark Mode](https://quasar.dev/style/dark-mode) [Spacing](https://quasar.dev/style/spacing) [Shadows](https://quasar.dev/style/shadows) [Breakpoints](https://quasar.dev/style/breakpoints) [Body classes](https://quasar.dev/style/body-classes) [Visibility](https://quasar.dev/style/visibility) [Positioning](https://quasar.dev/style/positioning) [Sass/SCSS Variables](https://quasar.dev/style/sass-scss-variables) [Other Helper Classes](https://quasar.dev/style/other-helper-classes) + +_view\_quilt_ + +Layout and Grid + +Flex Grid + +[Introduction to Flexbox](https://quasar.dev/layout/grid/introduction-to-flexbox) [Grid Row](https://quasar.dev/layout/grid/row) [Grid Column](https://quasar.dev/layout/grid/column) [Grid Gutter](https://quasar.dev/layout/grid/gutter) [Flexbox patterns](https://quasar.dev/layout/grid/flexbox-patterns) [Flex Playground](https://quasar.dev/layout/grid/flex-playground) + +[Layout](https://quasar.dev/layout/layout) [Routing with Layouts and Pages](https://quasar.dev/layout/routing-with-layouts-and-pages) [Layout Header and Footer](https://quasar.dev/layout/header-and-footer) [Layout Drawer](https://quasar.dev/layout/drawer) [Layout Page](https://quasar.dev/layout/page) [Layout Builder](https://quasar.dev/layout-builder) [Layout Gallery](https://quasar.dev/layout/gallery) [Page Sticky](https://quasar.dev/layout/page-sticky) [Page Scroller](https://quasar.dev/layout/page-scroller) + +_widgets_ + +Vue Components + +[Ajax Bar](https://quasar.dev/vue-components/ajax-bar) [Avatar](https://quasar.dev/vue-components/avatar) [Badge](https://quasar.dev/vue-components/badge) [Banner](https://quasar.dev/vue-components/banner) [Bar](https://quasar.dev/vue-components/bar) [Breadcrumbs](https://quasar.dev/vue-components/breadcrumbs) + +Buttons + +[Button](https://quasar.dev/vue-components/button) [Button Group](https://quasar.dev/vue-components/button-group) [Button Dropdown](https://quasar.dev/vue-components/button-dropdown) + +[Card](https://quasar.dev/vue-components/card) [Carousel](https://quasar.dev/vue-components/carousel) [Chat Message](https://quasar.dev/vue-components/chat) [Chip](https://quasar.dev/vue-components/chip) [Circular Progress](https://quasar.dev/vue-components/circular-progress) [Color Picker](https://quasar.dev/vue-components/color-picker) [Dialog](https://quasar.dev/vue-components/dialog) [Editor - WYSIWYG](https://quasar.dev/vue-components/editor) [Expansion Item](https://quasar.dev/vue-components/expansion-item) [Floating Action Button](https://quasar.dev/vue-components/floating-action-button) + +Form Components + +[Input Textfield](https://quasar.dev/vue-components/input) [Select](https://quasar.dev/vue-components/select) [File picker](https://quasar.dev/vue-components/file) [Form](https://quasar.dev/vue-components/form) [Field (wrapper)](https://quasar.dev/vue-components/field) [Radio](https://quasar.dev/vue-components/radio) [Checkbox](https://quasar.dev/vue-components/checkbox) [Toggle](https://quasar.dev/vue-components/toggle) [Button Toggle](https://quasar.dev/vue-components/button-toggle) [Option Group](https://quasar.dev/vue-components/option-group) [Slider](https://quasar.dev/vue-components/slider) [Range](https://quasar.dev/vue-components/range) [Time Picker](https://quasar.dev/vue-components/time) [Date Picker](https://quasar.dev/vue-components/date) + +[Icon](https://quasar.dev/vue-components/icon) [Img](https://quasar.dev/vue-components/img) [Infinite Scroll](https://quasar.dev/vue-components/infinite-scroll) [Inner Loading](https://quasar.dev/vue-components/inner-loading) [Intersection](https://quasar.dev/vue-components/intersection) [Knob](https://quasar.dev/vue-components/knob) [Linear Progress](https://quasar.dev/vue-components/linear-progress) [List & List Items](https://quasar.dev/vue-components/list-and-list-items) [Markup Table](https://quasar.dev/vue-components/markup-table) [Menu](https://quasar.dev/vue-components/menu) [No SSR](https://quasar.dev/vue-components/no-ssr) + +Observers + +[Resize Observer (for Element)](https://quasar.dev/vue-components/resize-observer) [Scroll Observer](https://quasar.dev/vue-components/scroll-observer) + +[Pagination](https://quasar.dev/vue-components/pagination) [Parallax](https://quasar.dev/vue-components/parallax) [Popup Edit](https://quasar.dev/vue-components/popup-edit) [Popup Proxy](https://quasar.dev/vue-components/popup-proxy) [Pull to refresh](https://quasar.dev/vue-components/pull-to-refresh) [Rating](https://quasar.dev/vue-components/rating) [Responsive](https://quasar.dev/vue-components/responsive) [Scroll Area](https://quasar.dev/vue-components/scroll-area) [Separator](https://quasar.dev/vue-components/separator) [Skeleton](https://quasar.dev/vue-components/skeleton) [Slide Item](https://quasar.dev/vue-components/slide-item) [Slide Transition](https://quasar.dev/vue-components/slide-transition) [Space](https://quasar.dev/vue-components/space) [Spinners](https://quasar.dev/vue-components/spinners) [Splitter](https://quasar.dev/vue-components/splitter) [Stepper](https://quasar.dev/vue-components/stepper) [Table](https://quasar.dev/vue-components/table) [Tabs](https://quasar.dev/vue-components/tabs) [Tab Panels](https://quasar.dev/vue-components/tab-panels) [Timeline](https://quasar.dev/vue-components/timeline) [Toolbar](https://quasar.dev/vue-components/toolbar) [Tooltip](https://quasar.dev/vue-components/tooltip) [Tree](https://quasar.dev/vue-components/tree) [Uploader](https://quasar.dev/vue-components/uploader) [Video](https://quasar.dev/vue-components/video) [Virtual Scroll](https://quasar.dev/vue-components/virtual-scroll) + +_swap\_calls_ + +Vue Directives + +[Close Popup](https://quasar.dev/vue-directives/close-popup) [Intersection](https://quasar.dev/vue-directives/intersection) [Material Ripples](https://quasar.dev/vue-directives/material-ripples) [Mutation](https://quasar.dev/vue-directives/mutation) [Morph](https://quasar.dev/vue-directives/morph) [Scroll](https://quasar.dev/vue-directives/scroll) [Scroll Fire](https://quasar.dev/vue-directives/scroll-fire) [Touch Hold](https://quasar.dev/vue-directives/touch-hold) [Touch Pan](https://quasar.dev/vue-directives/touch-pan) [Touch Repeat](https://quasar.dev/vue-directives/touch-repeat) [Touch Swipe](https://quasar.dev/vue-directives/touch-swipe) + +_extension_ + +Quasar Plugins + +[Addressbar Color](https://quasar.dev/quasar-plugins/addressbar-color) [App Fullscreen](https://quasar.dev/quasar-plugins/app-fullscreen) [App Visibility](https://quasar.dev/quasar-plugins/app-visibility) [Bottom Sheet](https://quasar.dev/quasar-plugins/bottom-sheet) [Cookies](https://quasar.dev/quasar-plugins/cookies) [Dark](https://quasar.dev/quasar-plugins/dark) [Dialog](https://quasar.dev/quasar-plugins/dialog) [Loading](https://quasar.dev/quasar-plugins/loading) [Loading Bar](https://quasar.dev/quasar-plugins/loading-bar) [Local/Session Storage](https://quasar.dev/quasar-plugins/web-storage) [Meta](https://quasar.dev/quasar-plugins/meta) [Notify](https://quasar.dev/quasar-plugins/notify) + +_developer\_mode_ + +Vue Composables + +[useQuasar](https://quasar.dev/vue-composables/use-quasar) [useDialogPluginComponent](https://quasar.dev/vue-composables/use-dialog-plugin-component) [useFormChild](https://quasar.dev/vue-composables/use-form-child) [useMeta](https://quasar.dev/vue-composables/use-meta) [useHydration\\ +\\ +new](https://quasar.dev/vue-composables/use-hydration) [useId\\ +\\ +new](https://quasar.dev/vue-composables/use-id) [useInterval\\ +\\ +new](https://quasar.dev/vue-composables/use-interval) [useRenderCache\\ +\\ +new](https://quasar.dev/vue-composables/use-render-cache) [useTick\\ +\\ +new](https://quasar.dev/vue-composables/use-tick) [useTimeout\\ +\\ +new](https://quasar.dev/vue-composables/use-timeout) [useSplitAttrs\\ +\\ +new](https://quasar.dev/vue-composables/use-split-attrs) + +_security_ + +Security + +[DO's and DON'Ts](https://quasar.dev/security/dos-and-donts) [Report a vulnerability](https://quasar.dev/security/report-a-vulnerability) + +_build_ + +Quasar CLI (with Vite) + +[Upgrade guide\\ +\\ +NEW!](https://quasar.dev/quasar-cli-vite/upgrade-guide) [The quasar.config file](https://quasar.dev/quasar-cli-vite/quasar-config-file) [Convert project to CLI with Vite](https://quasar.dev/quasar-cli-vite/convert-to-quasar-cli-with-vite) [Browser Compatibility](https://quasar.dev/quasar-cli-vite/browser-compatibility) [Supporting TypeScript](https://quasar.dev/quasar-cli-vite/supporting-ts) [Directory Structure](https://quasar.dev/quasar-cli-vite/directory-structure) [Commands List](https://quasar.dev/quasar-cli-vite/commands-list) [CSS Preprocessors](https://quasar.dev/quasar-cli-vite/css-preprocessors) [Routing](https://quasar.dev/quasar-cli-vite/routing) [Lazy Loading - Code Splitting](https://quasar.dev/quasar-cli-vite/lazy-loading) [Handling Assets](https://quasar.dev/quasar-cli-vite/handling-assets) [Boot Files](https://quasar.dev/quasar-cli-vite/boot-files) [Prefetch Feature](https://quasar.dev/quasar-cli-vite/prefetch-feature) [API Proxying](https://quasar.dev/quasar-cli-vite/api-proxying) [Handling Vite](https://quasar.dev/quasar-cli-vite/handling-vite) [Handling process.env](https://quasar.dev/quasar-cli-vite/handling-process-env) [State Management with Pinia](https://quasar.dev/quasar-cli-vite/state-management-with-pinia) [Linter](https://quasar.dev/quasar-cli-vite/linter) [Testing & Auditing](https://quasar.dev/quasar-cli-vite/testing-and-auditing) + +SPA mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-spa/introduction) [App Icons for SPA](https://quasar.dev/quasar-cli-vite/developing-spa/app-icons-spa) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-spa/build-commands) [Deploying](https://quasar.dev/quasar-cli-vite/developing-spa/deploying) + +SSR mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-ssr/introduction) [Writing Universal Code](https://quasar.dev/quasar-cli-vite/developing-ssr/writing-universal-code) [Preparation](https://quasar.dev/quasar-cli-vite/developing-ssr/preparation) [Configuring SSR](https://quasar.dev/quasar-cli-vite/developing-ssr/configuring-ssr) [ssrContext](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-context) [SSR Middleware](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-middleware) [SSR Webserver](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-webserver) [Vue SSR Directives](https://quasar.dev/quasar-cli-vite/developing-ssr/vue-ssr-directives) [App Icons for SSR](https://quasar.dev/quasar-cli-vite/developing-ssr/app-icons-ssr) [SEO for SSR](https://quasar.dev/quasar-cli-vite/developing-ssr/seo-for-ssr) [Client Side Hydration](https://quasar.dev/quasar-cli-vite/developing-ssr/client-side-hydration) [Handling 404 and 500 Errors](https://quasar.dev/quasar-cli-vite/developing-ssr/handling-404-and-500-errors) [SSR with PWA](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-with-pwa) [SSR FAQ](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-frequently-asked-questions) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-ssr/build-commands) [SSR with Typescript](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-with-typescript) [Deploying](https://quasar.dev/quasar-cli-vite/developing-ssr/deploying) + +PWA mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-pwa/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-pwa/preparation) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-pwa/build-commands) [Configuring PWA](https://quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa) [HMR for PWA](https://quasar.dev/quasar-cli-vite/developing-pwa/hmr-for-dev) [App Icons for PWA](https://quasar.dev/quasar-cli-vite/developing-pwa/app-icons-pwa) [Handling Service Worker](https://quasar.dev/quasar-cli-vite/developing-pwa/handling-service-worker) [PWA with Typescript](https://quasar.dev/quasar-cli-vite/developing-pwa/pwa-with-typescript) + +[Developing Mobile Apps](https://quasar.dev/quasar-cli-vite/developing-mobile-apps) + +Capacitor mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/preparation) [Capacitor versions](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/capacitor-version-support) [Configuring Capacitor](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/configuring-capacitor) [App Icons for Capacitor](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/app-icons-capacitor) [Capacitor API](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/capacitor-api) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/publishing-to-store) + +Cordova mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/preparation) [Configuring Cordova](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/configuring-cordova) [App Icons for Cordova](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/app-icons-cordova) [Cordova Plugins](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/cordova-plugins) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/publishing-to-store) + +Electron mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-electron-apps/introduction) [Upgrade guide](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-upgrade-guide) [Preparation](https://quasar.dev/quasar-cli-vite/developing-electron-apps/preparation) [Configuring Electron](https://quasar.dev/quasar-cli-vite/developing-electron-apps/configuring-electron) [App Icons for Electron](https://quasar.dev/quasar-cli-vite/developing-electron-apps/app-icons-electron) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-electron-apps/build-commands) [Preload Script](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-preload-script) [Electron Packages](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-packages) [Accessing files](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-accessing-files) [Frameless Electron Window](https://quasar.dev/quasar-cli-vite/developing-electron-apps/frameless-electron-window) [Electron with Typescript](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-with-typescript) [Electron Security Concerns](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-security-concerns) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-vite/developing-electron-apps/troubleshooting-and-tips) + +Browser Extensions mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/preparation) [Configuring BEX](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex) [App Icons for BEX](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/app-icons-browser-extension) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/build-commands) [Types of BEX](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/types-of-bex) [BEX Bridge Communication](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/bex-bridge) [Background Script](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/background-script) [Content Scripts](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/content-scripts) + +[Ajax Requests](https://quasar.dev/quasar-cli-vite/ajax-requests) [Opening Dev Server To Public](https://quasar.dev/quasar-cli-vite/opening-dev-server-to-public) + +_build_ + +Quasar CLI (with Webpack) + +[Upgrade guide\\ +\\ +NEW!](https://quasar.dev/quasar-cli-webpack/upgrade-guide) [The quasar.config file](https://quasar.dev/quasar-cli-webpack/quasar-config-file) [Convert to CLI with Webpack](https://quasar.dev/quasar-cli-webpack/convert-to-quasar-cli-with-webpack) [Browser Compatibility](https://quasar.dev/quasar-cli-webpack/browser-compatibility) [Supporting TypeScript](https://quasar.dev/quasar-cli-webpack/supporting-ts) [Directory Structure](https://quasar.dev/quasar-cli-webpack/directory-structure) [Commands List](https://quasar.dev/quasar-cli-webpack/commands-list) [CSS Preprocessors](https://quasar.dev/quasar-cli-webpack/css-preprocessors) [Routing](https://quasar.dev/quasar-cli-webpack/routing) [Lazy Loading - Code Splitting](https://quasar.dev/quasar-cli-webpack/lazy-loading) [Handling Assets](https://quasar.dev/quasar-cli-webpack/handling-assets) [Boot Files](https://quasar.dev/quasar-cli-webpack/boot-files) [Prefetch Feature](https://quasar.dev/quasar-cli-webpack/prefetch-feature) [API Proxying](https://quasar.dev/quasar-cli-webpack/api-proxying) [Handling Webpack](https://quasar.dev/quasar-cli-webpack/handling-webpack) [Handling process.env](https://quasar.dev/quasar-cli-webpack/handling-process-env) [State Management with Pinia](https://quasar.dev/quasar-cli-webpack/state-management-with-pinia) [Linter](https://quasar.dev/quasar-cli-webpack/linter) [Testing & Auditing](https://quasar.dev/quasar-cli-webpack/testing-and-auditing) + +SPA mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-spa/introduction) [App Icons for SPA](https://quasar.dev/quasar-cli-webpack/developing-spa/app-icons-spa) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-spa/build-commands) [Deploying](https://quasar.dev/quasar-cli-webpack/developing-spa/deploying) + +SSR mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-ssr/introduction) [Writing Universal Code](https://quasar.dev/quasar-cli-webpack/developing-ssr/writing-universal-code) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-ssr/preparation) [Configuring SSR](https://quasar.dev/quasar-cli-webpack/developing-ssr/configuring-ssr) [ssrContext](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-context) [SSR Middleware](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-middleware) [SSR Webserver](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-webserver) [Vue SSR Directives](https://quasar.dev/quasar-cli-webpack/developing-ssr/vue-ssr-directives) [App Icons for SSR](https://quasar.dev/quasar-cli-webpack/developing-ssr/app-icons-ssr) [SEO for SSR](https://quasar.dev/quasar-cli-webpack/developing-ssr/seo-for-ssr) [Client Side Hydration](https://quasar.dev/quasar-cli-webpack/developing-ssr/client-side-hydration) [Handling 404 and 500 Errors](https://quasar.dev/quasar-cli-webpack/developing-ssr/handling-404-and-500-errors) [SSR with PWA](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-with-pwa) [SSR FAQ](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-frequently-asked-questions) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-ssr/build-commands) [SSR with Typescript](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-with-typescript) [Deploying](https://quasar.dev/quasar-cli-webpack/developing-ssr/deploying) + +PWA mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-pwa/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-pwa/preparation) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-pwa/build-commands) [Configuring PWA](https://quasar.dev/quasar-cli-webpack/developing-pwa/configuring-pwa) [HMR for PWA](https://quasar.dev/quasar-cli-webpack/developing-pwa/hmr-for-dev) [App Icons for PWA](https://quasar.dev/quasar-cli-webpack/developing-pwa/app-icons-pwa) [Handling Service Worker](https://quasar.dev/quasar-cli-webpack/developing-pwa/handling-service-worker) [PWA with Typescript](https://quasar.dev/quasar-cli-webpack/developing-pwa/pwa-with-typescript) + +[Developing Mobile Apps](https://quasar.dev/quasar-cli-webpack/developing-mobile-apps) + +Capacitor mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/preparation) [Capacitor versions](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/capacitor-version-support) [Configuring Capacitor](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/configuring-capacitor) [App Icons for Capacitor](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/app-icons-capacitor) [Capacitor API](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/capacitor-api) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/publishing-to-store) + +Cordova mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/preparation) [Configuring Cordova](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/configuring-cordova) [App Icons for Cordova](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/app-icons-cordova) [Cordova Plugins](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/cordova-plugins) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/publishing-to-store) + +Electron mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/introduction) [Upgrade guide](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-upgrade-guide) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/preparation) [Configuring Electron](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/configuring-electron) [App Icons for Electron](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/app-icons-electron) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/build-commands) [Preload Script](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-preload-script) [Electron Packages](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-packages) [Accessing files](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-accessing-files) [Frameless Electron Window](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/frameless-electron-window) [Electron with Typescript](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-with-typescript) [Electron Security Concerns](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-security-concerns) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/troubleshooting-and-tips) + +Browser Extensions mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/preparation) [Configuring BEX](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/configuring-bex) [App Icons for BEX](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/app-icons-browser-extension) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/build-commands) [Types of BEX](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/types-of-bex) [BEX Bridge Communication](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/bex-bridge) [Background Script](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/background-script) [Content Scripts](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/content-scripts) + +[Ajax Requests](https://quasar.dev/quasar-cli-webpack/ajax-requests) [Opening Dev Server To Public](https://quasar.dev/quasar-cli-webpack/opening-dev-server-to-public) + +_stars_ + +Icon Genie CLI + +[Introduction](https://quasar.dev/icongenie/introduction) [Installation / Upgrade notes](https://quasar.dev/icongenie/installation) [Command list](https://quasar.dev/icongenie/command-list) [App Icons List](https://quasar.dev/icongenie/app-icons-list) [Profile files](https://quasar.dev/icongenie/profile-files) + +_note\_add_ + +App Extensions + +[Introduction](https://quasar.dev/app-extensions/introduction) [Discover App Extensions](https://quasar.dev/app-extensions/discover) + +Development Guide + +[Introduction](https://quasar.dev/app-extensions/development-guide/introduction) [Prompts API](https://quasar.dev/app-extensions/development-guide/prompts-api) [Install API](https://quasar.dev/app-extensions/development-guide/install-api) [Index API](https://quasar.dev/app-extensions/development-guide/index-api) [Uninstall API](https://quasar.dev/app-extensions/development-guide/uninstall-api) + +Tips and Tricks + +[Introduction](https://quasar.dev/app-extensions/tips-and-tricks/introduction) [Provide a UI component](https://quasar.dev/app-extensions/tips-and-tricks/provide-a-ui-component) [Provide a directive](https://quasar.dev/app-extensions/tips-and-tricks/provide-a-directive) [Inject Quasar Plugin](https://quasar.dev/app-extensions/tips-and-tricks/inject-quasar-plugin) [Starter kit equivalent](https://quasar.dev/app-extensions/tips-and-tricks/starter-kit-equivalent) [Chain Webpack](https://quasar.dev/app-extensions/tips-and-tricks/chain-webpack) + +_healing_ + +Quasar Utils + +[Date Utils](https://quasar.dev/quasar-utils/date-utils) [Color Utils](https://quasar.dev/quasar-utils/color-utils) [DOM Utils](https://quasar.dev/quasar-utils/dom-utils) [Morph Utils](https://quasar.dev/quasar-utils/morph-utils) [Formatter Utils](https://quasar.dev/quasar-utils/formatter-utils) [Scrolling Utils](https://quasar.dev/quasar-utils/scrolling-utils) [Type Checking Utils](https://quasar.dev/quasar-utils/type-checking-utils) [EventBus Util](https://quasar.dev/quasar-utils/event-bus-util) [Other Utils](https://quasar.dev/quasar-utils/other-utils) + +QMenu + +[Vue Directives\\ +\\ +Close Popup](https://quasar.dev/vue-directives/close-popup) [Options & Helpers\\ +\\ +Transitions](https://quasar.dev/options/transitions) [Vue Components\\ +\\ +Popup Proxy](https://quasar.dev/vue-components/popup-proxy) + +The QMenu component is a convenient way to show menus. Goes very well with [QList](https://quasar.dev/vue-components/list-and-list-items) as dropdown content, but it’s by no means limited to it. + +QMenu API + +props + +25 + +slots + +1 + +events + +6 + +methods + +5 + +computedProps + +1 + +* * * + +behavior + +12 + +model + +1 + +position + +5 + +style + +4 + +transition + +3 + +* * * + +target + +: Boolean \| String \| Element + +Description + +Configure a target element to trigger component toggle; 'true' means it enables the parent DOM element, 'false' means it disables attaching events to any DOM elements; By using a String (CSS selector) or a DOM element it attaches the events to the specified DOM element (if it exists) + +no-parent-event + +: Boolean + +Description + +Skips attaching events to the target DOM element (that trigger the element to get shown) + +context-menu + +: Boolean + +Description + +Allows the component to behave like a context menu, which opens with a right mouse click (or long tap on mobile) + +scroll-target + +: Element \| String + +Description + +CSS selector or DOM element to be used as a custom scroll container instead of the auto detected one + +touch-position + +: Boolean + +Description + +Allows for the target position to be set by the mouse position, when the target of the menu is either clicked or touched + +persistent + +: Boolean + +Description + +Allows the menu to not be dismissed by a click/tap outside of the menu or by hitting the ESC key; Also, an app route change won't dismiss it + +no-esc-dismiss + +: Boolean + +v2.18+ + +Description + +User cannot dismiss the popup by hitting ESC key; No need to set it if 'persistent' prop is also set + +no-route-dismiss + +: Boolean + +Description + +Changing route app won't dismiss the popup; No need to set it if 'persistent' prop is also set + +auto-close + +: Boolean + +Description + +Allows any click/tap in the menu to close it; Useful instead of attaching events to each menu item that should close the menu on click/tap + +separate-close-popup + +: Boolean + +Description + +Separate from parent menu, marking it as a separate closing point for v-close-popup (without this, chained menus close all together) + +no-refocus + +: Boolean + +Description + +(Accessibility) When Menu gets hidden, do not refocus on the DOM element that previously had focus + +no-focus + +: Boolean + +Description + +(Accessibility) When Menu gets shown, do not switch focus on it + +## Usage + +The idea with QMenu is to place it inside your DOM element / component that you want to be the trigger as direct child. Don’t worry about QMenu content inheriting CSS from the container as the QMenu will be injected as a direct child of `` through a Quasar Portal. + +TIP + +Don’t forget to use the directive `v-close-popup` in your clickable menu items if you want the menu to close automatically. Alternatively, you can use the QMenu’s property `auto-close` or handle closing the menu yourself through its v-model. + +### Basic + +Basic + +* * * + +_code_ + +Template + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +Basic MenuAuto-Close Menu + +I am groot! + +(Click me! Using touch-position) + +Idea for content + +* * * + +_code_ + +Template + +Script + +All + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +Account Settings + +Toggle through v-model + +* * * + +_code_ + +Template + +Script + +All + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +ShowHide + +Click me + +WARNING + +If you want to conditionally activate or de-activate a QMenu, please use `v-if` on it instead of `v-show`. + +### Submenus + +Menus in menus + +* * * + +_code_ + +Template + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +Click me + +File + +Edit + +_minimize__crop\_square__close_ + +### Sizing and styling + +Sizing + +* * * + +_code_ + +Template + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +Fit MenuMax Height MenuMax Width Menu + +Style + +* * * + +_code_ + +Template + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +Content Class MenuContent Style Menu + +### Context menu + +You can also set QMenu to act as a context menu. On desktop, you need to right click the parent target to trigger it, and on mobile a long tap will do the job. + +Context Menu + +* * * + +_code_ + +Template + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +![](https://cdn.quasar.dev/img/parallax1.jpg) + +### Persistent + +If you want the QMenu to not close if app route changes or if hitting ESCAPE key or if clicking/tapping outside of the menu, then use `persistent` prop: + +Persistent + +* * * + +_code_ + +Template + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +Persistent Menu + +### Transitions + +In the example below there’s a few transitions showcased. For a full list of transitions available, go to [Transitions](https://quasar.dev/options/transitions). + +Transition examples + +* * * + +_code_ + +Template + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +Flip MenuScale MenuJump MenuRotate Menu + +### Reusable + +The example below shows how to create a re-usable menu that can be shared with different targets. + +Using target + +* * * + +_code_ + +Template + +Script + +All + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +false (no target whatsoever) + +true (original parent) + +#target-img-1 + +#target-img-2 + +#bogus + +![](https://cdn.quasar.dev/img/material.png) + +![](https://cdn.quasar.dev/img/parallax2.jpg) + +![](https://cdn.quasar.dev/img/blueish.jpg) + +### Positioning + +Position examples + +* * * + +_code_ + +Template + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +Anchor/Self MenuAnchor/Self MenuAnchor/Self MenuOffset MenuOffset MenuOffset Menu + +The position of QMenu can be customized. It keeps account of the `anchor` and `self` optional props. The final position of QMenu popup is calculated so that it will be displayed on the available screen real estate, switching to the right-side and/or top-side when necessary. + +For horizontal positioning you can use `start` and `end` when you want to automatically take into account if on RTL or non-RTL. `start` and `end` mean “left” for non-RTL and “right” for RTL. + +Test me + +* * * + +Fit + +Cover + +Anchor Origin + +Vertical + +Top + +Center + +Bottom + +Horizontal + +Left + +Middle + +Right + +Start + +End + +Self Origin + +Vertical + +Top + +Center + +Bottom + +Horizontal + +Left + +Middle + +Right + +Start + +End + +* * * + +```html + + + New tab + + + New incognito tab + + +``` + +_content\_paste_ + +Copied to clipboard + +Ready for more? + +[Vue Components\\ +\\ +Markup Table](https://quasar.dev/vue-components/markup-table) [Vue Components\\ +\\ +No SSR](https://quasar.dev/vue-components/no-ssr) + +* * * + +Caught a mistake? [Edit this page in browser](https://github.com/quasarframework/quasar/edit/dev/docs/src/pages/vue-components/menu/menu.md) + +1\. Introduction + +2\. QMenu API + +3\. Usage + +3.1. Basic + +3.2. Submenus + +3.3. Sizing and styling + +3.4. Context menu + +3.5. Persistent + +3.6. Transitions + +3.7. Reusable + +3.8. Positioning + +[MIT License](https://github.com/quasarframework/quasar/blob/dev/LICENSE) [Privacy Policy](https://www.iubenda.com/privacy-policy/40685560) + +Copyright © 2015-present PULSARDEV SRL, [Razvan Stoenescu](https://github.com/rstoenescu) + +This website has been designed in collaboration with [Dreamonkey Srl](https://www.dreamonkey.com/) + +Our third-party tools use cookies, which are necessary for its functioning and required to achieve the purposes illustrated in the cookie policy. + +AcceptLearn more + +## Quasar Icon Component +[_assignment\_late_\\ +\\ +Why donate](https://quasar.dev/why-donate) [_travel\_explore_\\ +\\ +API Explorer](https://quasar.dev/api-explorer) + +_code_ + +How to contribute + +[Contribution Guide](https://quasar.dev/how-to-contribute/contribution-guide) [Running Projects](https://quasar.dev/how-to-contribute/running-projects) [Start a New Project](https://quasar.dev/how-to-contribute/new-project) [Project Maintainer Role](https://quasar.dev/how-to-contribute/project-maintainer) [Commit Conventions](https://quasar.dev/how-to-contribute/commit-conventions) + +_tune_ + +Options & Helpers + +[The $q object](https://quasar.dev/options/the-q-object) [App Icons](https://quasar.dev/options/app-icons) [SEO](https://quasar.dev/options/seo) [Quasar Language Packs](https://quasar.dev/options/quasar-language-packs) [App Internationalization](https://quasar.dev/options/app-internationalization) [RTL Support](https://quasar.dev/options/rtl-support) [Installing Icon Libraries](https://quasar.dev/options/installing-icon-libraries) [Quasar Icon Sets](https://quasar.dev/options/quasar-icon-sets) [Platform Detection](https://quasar.dev/options/platform-detection) [Screen Plugin](https://quasar.dev/options/screen-plugin) [Animations](https://quasar.dev/options/animations) [Transitions](https://quasar.dev/options/transitions) + +_style_ + +Style & Identity + +[Typography](https://quasar.dev/style/typography) [Color Palette](https://quasar.dev/style/color-palette) [Theme Builder](https://quasar.dev/style/theme-builder) [Dark Mode](https://quasar.dev/style/dark-mode) [Spacing](https://quasar.dev/style/spacing) [Shadows](https://quasar.dev/style/shadows) [Breakpoints](https://quasar.dev/style/breakpoints) [Body classes](https://quasar.dev/style/body-classes) [Visibility](https://quasar.dev/style/visibility) [Positioning](https://quasar.dev/style/positioning) [Sass/SCSS Variables](https://quasar.dev/style/sass-scss-variables) [Other Helper Classes](https://quasar.dev/style/other-helper-classes) + +_view\_quilt_ + +Layout and Grid + +Flex Grid + +[Introduction to Flexbox](https://quasar.dev/layout/grid/introduction-to-flexbox) [Grid Row](https://quasar.dev/layout/grid/row) [Grid Column](https://quasar.dev/layout/grid/column) [Grid Gutter](https://quasar.dev/layout/grid/gutter) [Flexbox patterns](https://quasar.dev/layout/grid/flexbox-patterns) [Flex Playground](https://quasar.dev/layout/grid/flex-playground) + +[Layout](https://quasar.dev/layout/layout) [Routing with Layouts and Pages](https://quasar.dev/layout/routing-with-layouts-and-pages) [Layout Header and Footer](https://quasar.dev/layout/header-and-footer) [Layout Drawer](https://quasar.dev/layout/drawer) [Layout Page](https://quasar.dev/layout/page) [Layout Builder](https://quasar.dev/layout-builder) [Layout Gallery](https://quasar.dev/layout/gallery) [Page Sticky](https://quasar.dev/layout/page-sticky) [Page Scroller](https://quasar.dev/layout/page-scroller) + +_widgets_ + +Vue Components + +[Ajax Bar](https://quasar.dev/vue-components/ajax-bar) [Avatar](https://quasar.dev/vue-components/avatar) [Badge](https://quasar.dev/vue-components/badge) [Banner](https://quasar.dev/vue-components/banner) [Bar](https://quasar.dev/vue-components/bar) [Breadcrumbs](https://quasar.dev/vue-components/breadcrumbs) + +Buttons + +[Button](https://quasar.dev/vue-components/button) [Button Group](https://quasar.dev/vue-components/button-group) [Button Dropdown](https://quasar.dev/vue-components/button-dropdown) + +[Card](https://quasar.dev/vue-components/card) [Carousel](https://quasar.dev/vue-components/carousel) [Chat Message](https://quasar.dev/vue-components/chat) [Chip](https://quasar.dev/vue-components/chip) [Circular Progress](https://quasar.dev/vue-components/circular-progress) [Color Picker](https://quasar.dev/vue-components/color-picker) [Dialog](https://quasar.dev/vue-components/dialog) [Editor - WYSIWYG](https://quasar.dev/vue-components/editor) [Expansion Item](https://quasar.dev/vue-components/expansion-item) [Floating Action Button](https://quasar.dev/vue-components/floating-action-button) + +Form Components + +[Input Textfield](https://quasar.dev/vue-components/input) [Select](https://quasar.dev/vue-components/select) [File picker](https://quasar.dev/vue-components/file) [Form](https://quasar.dev/vue-components/form) [Field (wrapper)](https://quasar.dev/vue-components/field) [Radio](https://quasar.dev/vue-components/radio) [Checkbox](https://quasar.dev/vue-components/checkbox) [Toggle](https://quasar.dev/vue-components/toggle) [Button Toggle](https://quasar.dev/vue-components/button-toggle) [Option Group](https://quasar.dev/vue-components/option-group) [Slider](https://quasar.dev/vue-components/slider) [Range](https://quasar.dev/vue-components/range) [Time Picker](https://quasar.dev/vue-components/time) [Date Picker](https://quasar.dev/vue-components/date) + +[Icon](https://quasar.dev/vue-components/icon) [Img](https://quasar.dev/vue-components/img) [Infinite Scroll](https://quasar.dev/vue-components/infinite-scroll) [Inner Loading](https://quasar.dev/vue-components/inner-loading) [Intersection](https://quasar.dev/vue-components/intersection) [Knob](https://quasar.dev/vue-components/knob) [Linear Progress](https://quasar.dev/vue-components/linear-progress) [List & List Items](https://quasar.dev/vue-components/list-and-list-items) [Markup Table](https://quasar.dev/vue-components/markup-table) [Menu](https://quasar.dev/vue-components/menu) [No SSR](https://quasar.dev/vue-components/no-ssr) + +Observers + +[Resize Observer (for Element)](https://quasar.dev/vue-components/resize-observer) [Scroll Observer](https://quasar.dev/vue-components/scroll-observer) + +[Pagination](https://quasar.dev/vue-components/pagination) [Parallax](https://quasar.dev/vue-components/parallax) [Popup Edit](https://quasar.dev/vue-components/popup-edit) [Popup Proxy](https://quasar.dev/vue-components/popup-proxy) [Pull to refresh](https://quasar.dev/vue-components/pull-to-refresh) [Rating](https://quasar.dev/vue-components/rating) [Responsive](https://quasar.dev/vue-components/responsive) [Scroll Area](https://quasar.dev/vue-components/scroll-area) [Separator](https://quasar.dev/vue-components/separator) [Skeleton](https://quasar.dev/vue-components/skeleton) [Slide Item](https://quasar.dev/vue-components/slide-item) [Slide Transition](https://quasar.dev/vue-components/slide-transition) [Space](https://quasar.dev/vue-components/space) [Spinners](https://quasar.dev/vue-components/spinners) [Splitter](https://quasar.dev/vue-components/splitter) [Stepper](https://quasar.dev/vue-components/stepper) [Table](https://quasar.dev/vue-components/table) [Tabs](https://quasar.dev/vue-components/tabs) [Tab Panels](https://quasar.dev/vue-components/tab-panels) [Timeline](https://quasar.dev/vue-components/timeline) [Toolbar](https://quasar.dev/vue-components/toolbar) [Tooltip](https://quasar.dev/vue-components/tooltip) [Tree](https://quasar.dev/vue-components/tree) [Uploader](https://quasar.dev/vue-components/uploader) [Video](https://quasar.dev/vue-components/video) [Virtual Scroll](https://quasar.dev/vue-components/virtual-scroll) + +_swap\_calls_ + +Vue Directives + +[Close Popup](https://quasar.dev/vue-directives/close-popup) [Intersection](https://quasar.dev/vue-directives/intersection) [Material Ripples](https://quasar.dev/vue-directives/material-ripples) [Mutation](https://quasar.dev/vue-directives/mutation) [Morph](https://quasar.dev/vue-directives/morph) [Scroll](https://quasar.dev/vue-directives/scroll) [Scroll Fire](https://quasar.dev/vue-directives/scroll-fire) [Touch Hold](https://quasar.dev/vue-directives/touch-hold) [Touch Pan](https://quasar.dev/vue-directives/touch-pan) [Touch Repeat](https://quasar.dev/vue-directives/touch-repeat) [Touch Swipe](https://quasar.dev/vue-directives/touch-swipe) + +_extension_ + +Quasar Plugins + +[Addressbar Color](https://quasar.dev/quasar-plugins/addressbar-color) [App Fullscreen](https://quasar.dev/quasar-plugins/app-fullscreen) [App Visibility](https://quasar.dev/quasar-plugins/app-visibility) [Bottom Sheet](https://quasar.dev/quasar-plugins/bottom-sheet) [Cookies](https://quasar.dev/quasar-plugins/cookies) [Dark](https://quasar.dev/quasar-plugins/dark) [Dialog](https://quasar.dev/quasar-plugins/dialog) [Loading](https://quasar.dev/quasar-plugins/loading) [Loading Bar](https://quasar.dev/quasar-plugins/loading-bar) [Local/Session Storage](https://quasar.dev/quasar-plugins/web-storage) [Meta](https://quasar.dev/quasar-plugins/meta) [Notify](https://quasar.dev/quasar-plugins/notify) + +_developer\_mode_ + +Vue Composables + +[useQuasar](https://quasar.dev/vue-composables/use-quasar) [useDialogPluginComponent](https://quasar.dev/vue-composables/use-dialog-plugin-component) [useFormChild](https://quasar.dev/vue-composables/use-form-child) [useMeta](https://quasar.dev/vue-composables/use-meta) [useHydration\\ +\\ +new](https://quasar.dev/vue-composables/use-hydration) [useId\\ +\\ +new](https://quasar.dev/vue-composables/use-id) [useInterval\\ +\\ +new](https://quasar.dev/vue-composables/use-interval) [useRenderCache\\ +\\ +new](https://quasar.dev/vue-composables/use-render-cache) [useTick\\ +\\ +new](https://quasar.dev/vue-composables/use-tick) [useTimeout\\ +\\ +new](https://quasar.dev/vue-composables/use-timeout) [useSplitAttrs\\ +\\ +new](https://quasar.dev/vue-composables/use-split-attrs) + +_security_ + +Security + +[DO's and DON'Ts](https://quasar.dev/security/dos-and-donts) [Report a vulnerability](https://quasar.dev/security/report-a-vulnerability) + +_build_ + +Quasar CLI (with Vite) + +[Upgrade guide\\ +\\ +NEW!](https://quasar.dev/quasar-cli-vite/upgrade-guide) [The quasar.config file](https://quasar.dev/quasar-cli-vite/quasar-config-file) [Convert project to CLI with Vite](https://quasar.dev/quasar-cli-vite/convert-to-quasar-cli-with-vite) [Browser Compatibility](https://quasar.dev/quasar-cli-vite/browser-compatibility) [Supporting TypeScript](https://quasar.dev/quasar-cli-vite/supporting-ts) [Directory Structure](https://quasar.dev/quasar-cli-vite/directory-structure) [Commands List](https://quasar.dev/quasar-cli-vite/commands-list) [CSS Preprocessors](https://quasar.dev/quasar-cli-vite/css-preprocessors) [Routing](https://quasar.dev/quasar-cli-vite/routing) [Lazy Loading - Code Splitting](https://quasar.dev/quasar-cli-vite/lazy-loading) [Handling Assets](https://quasar.dev/quasar-cli-vite/handling-assets) [Boot Files](https://quasar.dev/quasar-cli-vite/boot-files) [Prefetch Feature](https://quasar.dev/quasar-cli-vite/prefetch-feature) [API Proxying](https://quasar.dev/quasar-cli-vite/api-proxying) [Handling Vite](https://quasar.dev/quasar-cli-vite/handling-vite) [Handling process.env](https://quasar.dev/quasar-cli-vite/handling-process-env) [State Management with Pinia](https://quasar.dev/quasar-cli-vite/state-management-with-pinia) [Linter](https://quasar.dev/quasar-cli-vite/linter) [Testing & Auditing](https://quasar.dev/quasar-cli-vite/testing-and-auditing) + +SPA mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-spa/introduction) [App Icons for SPA](https://quasar.dev/quasar-cli-vite/developing-spa/app-icons-spa) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-spa/build-commands) [Deploying](https://quasar.dev/quasar-cli-vite/developing-spa/deploying) + +SSR mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-ssr/introduction) [Writing Universal Code](https://quasar.dev/quasar-cli-vite/developing-ssr/writing-universal-code) [Preparation](https://quasar.dev/quasar-cli-vite/developing-ssr/preparation) [Configuring SSR](https://quasar.dev/quasar-cli-vite/developing-ssr/configuring-ssr) [ssrContext](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-context) [SSR Middleware](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-middleware) [SSR Webserver](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-webserver) [Vue SSR Directives](https://quasar.dev/quasar-cli-vite/developing-ssr/vue-ssr-directives) [App Icons for SSR](https://quasar.dev/quasar-cli-vite/developing-ssr/app-icons-ssr) [SEO for SSR](https://quasar.dev/quasar-cli-vite/developing-ssr/seo-for-ssr) [Client Side Hydration](https://quasar.dev/quasar-cli-vite/developing-ssr/client-side-hydration) [Handling 404 and 500 Errors](https://quasar.dev/quasar-cli-vite/developing-ssr/handling-404-and-500-errors) [SSR with PWA](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-with-pwa) [SSR FAQ](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-frequently-asked-questions) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-ssr/build-commands) [SSR with Typescript](https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-with-typescript) [Deploying](https://quasar.dev/quasar-cli-vite/developing-ssr/deploying) + +PWA mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-pwa/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-pwa/preparation) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-pwa/build-commands) [Configuring PWA](https://quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa) [HMR for PWA](https://quasar.dev/quasar-cli-vite/developing-pwa/hmr-for-dev) [App Icons for PWA](https://quasar.dev/quasar-cli-vite/developing-pwa/app-icons-pwa) [Handling Service Worker](https://quasar.dev/quasar-cli-vite/developing-pwa/handling-service-worker) [PWA with Typescript](https://quasar.dev/quasar-cli-vite/developing-pwa/pwa-with-typescript) + +[Developing Mobile Apps](https://quasar.dev/quasar-cli-vite/developing-mobile-apps) + +Capacitor mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/preparation) [Capacitor versions](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/capacitor-version-support) [Configuring Capacitor](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/configuring-capacitor) [App Icons for Capacitor](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/app-icons-capacitor) [Capacitor API](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/capacitor-api) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/publishing-to-store) + +Cordova mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/preparation) [Configuring Cordova](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/configuring-cordova) [App Icons for Cordova](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/app-icons-cordova) [Cordova Plugins](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/cordova-plugins) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-vite/developing-cordova-apps/publishing-to-store) + +Electron mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-electron-apps/introduction) [Upgrade guide](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-upgrade-guide) [Preparation](https://quasar.dev/quasar-cli-vite/developing-electron-apps/preparation) [Configuring Electron](https://quasar.dev/quasar-cli-vite/developing-electron-apps/configuring-electron) [App Icons for Electron](https://quasar.dev/quasar-cli-vite/developing-electron-apps/app-icons-electron) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-electron-apps/build-commands) [Preload Script](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-preload-script) [Electron Packages](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-packages) [Accessing files](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-accessing-files) [Frameless Electron Window](https://quasar.dev/quasar-cli-vite/developing-electron-apps/frameless-electron-window) [Electron with Typescript](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-with-typescript) [Electron Security Concerns](https://quasar.dev/quasar-cli-vite/developing-electron-apps/electron-security-concerns) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-vite/developing-electron-apps/troubleshooting-and-tips) + +Browser Extensions mode + +[Introduction](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/introduction) [Preparation](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/preparation) [Configuring BEX](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex) [App Icons for BEX](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/app-icons-browser-extension) [Build Commands](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/build-commands) [Types of BEX](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/types-of-bex) [BEX Bridge Communication](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/bex-bridge) [Background Script](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/background-script) [Content Scripts](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/content-scripts) + +[Ajax Requests](https://quasar.dev/quasar-cli-vite/ajax-requests) [Opening Dev Server To Public](https://quasar.dev/quasar-cli-vite/opening-dev-server-to-public) + +_build_ + +Quasar CLI (with Webpack) + +[Upgrade guide\\ +\\ +NEW!](https://quasar.dev/quasar-cli-webpack/upgrade-guide) [The quasar.config file](https://quasar.dev/quasar-cli-webpack/quasar-config-file) [Convert to CLI with Webpack](https://quasar.dev/quasar-cli-webpack/convert-to-quasar-cli-with-webpack) [Browser Compatibility](https://quasar.dev/quasar-cli-webpack/browser-compatibility) [Supporting TypeScript](https://quasar.dev/quasar-cli-webpack/supporting-ts) [Directory Structure](https://quasar.dev/quasar-cli-webpack/directory-structure) [Commands List](https://quasar.dev/quasar-cli-webpack/commands-list) [CSS Preprocessors](https://quasar.dev/quasar-cli-webpack/css-preprocessors) [Routing](https://quasar.dev/quasar-cli-webpack/routing) [Lazy Loading - Code Splitting](https://quasar.dev/quasar-cli-webpack/lazy-loading) [Handling Assets](https://quasar.dev/quasar-cli-webpack/handling-assets) [Boot Files](https://quasar.dev/quasar-cli-webpack/boot-files) [Prefetch Feature](https://quasar.dev/quasar-cli-webpack/prefetch-feature) [API Proxying](https://quasar.dev/quasar-cli-webpack/api-proxying) [Handling Webpack](https://quasar.dev/quasar-cli-webpack/handling-webpack) [Handling process.env](https://quasar.dev/quasar-cli-webpack/handling-process-env) [State Management with Pinia](https://quasar.dev/quasar-cli-webpack/state-management-with-pinia) [Linter](https://quasar.dev/quasar-cli-webpack/linter) [Testing & Auditing](https://quasar.dev/quasar-cli-webpack/testing-and-auditing) + +SPA mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-spa/introduction) [App Icons for SPA](https://quasar.dev/quasar-cli-webpack/developing-spa/app-icons-spa) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-spa/build-commands) [Deploying](https://quasar.dev/quasar-cli-webpack/developing-spa/deploying) + +SSR mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-ssr/introduction) [Writing Universal Code](https://quasar.dev/quasar-cli-webpack/developing-ssr/writing-universal-code) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-ssr/preparation) [Configuring SSR](https://quasar.dev/quasar-cli-webpack/developing-ssr/configuring-ssr) [ssrContext](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-context) [SSR Middleware](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-middleware) [SSR Webserver](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-webserver) [Vue SSR Directives](https://quasar.dev/quasar-cli-webpack/developing-ssr/vue-ssr-directives) [App Icons for SSR](https://quasar.dev/quasar-cli-webpack/developing-ssr/app-icons-ssr) [SEO for SSR](https://quasar.dev/quasar-cli-webpack/developing-ssr/seo-for-ssr) [Client Side Hydration](https://quasar.dev/quasar-cli-webpack/developing-ssr/client-side-hydration) [Handling 404 and 500 Errors](https://quasar.dev/quasar-cli-webpack/developing-ssr/handling-404-and-500-errors) [SSR with PWA](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-with-pwa) [SSR FAQ](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-frequently-asked-questions) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-ssr/build-commands) [SSR with Typescript](https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-with-typescript) [Deploying](https://quasar.dev/quasar-cli-webpack/developing-ssr/deploying) + +PWA mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-pwa/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-pwa/preparation) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-pwa/build-commands) [Configuring PWA](https://quasar.dev/quasar-cli-webpack/developing-pwa/configuring-pwa) [HMR for PWA](https://quasar.dev/quasar-cli-webpack/developing-pwa/hmr-for-dev) [App Icons for PWA](https://quasar.dev/quasar-cli-webpack/developing-pwa/app-icons-pwa) [Handling Service Worker](https://quasar.dev/quasar-cli-webpack/developing-pwa/handling-service-worker) [PWA with Typescript](https://quasar.dev/quasar-cli-webpack/developing-pwa/pwa-with-typescript) + +[Developing Mobile Apps](https://quasar.dev/quasar-cli-webpack/developing-mobile-apps) + +Capacitor mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/preparation) [Capacitor versions](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/capacitor-version-support) [Configuring Capacitor](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/configuring-capacitor) [App Icons for Capacitor](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/app-icons-capacitor) [Capacitor API](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/capacitor-api) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/publishing-to-store) + +Cordova mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/preparation) [Configuring Cordova](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/configuring-cordova) [App Icons for Cordova](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/app-icons-cordova) [Cordova Plugins](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/cordova-plugins) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/build-commands) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/troubleshooting-and-tips) [Managing Google Analytics](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/managing-google-analytics) [Publishing to Store](https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/publishing-to-store) + +Electron mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/introduction) [Upgrade guide](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-upgrade-guide) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/preparation) [Configuring Electron](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/configuring-electron) [App Icons for Electron](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/app-icons-electron) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/build-commands) [Preload Script](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-preload-script) [Electron Packages](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-packages) [Accessing files](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-accessing-files) [Frameless Electron Window](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/frameless-electron-window) [Electron with Typescript](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-with-typescript) [Electron Security Concerns](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/electron-security-concerns) [Troubleshooting and Tips](https://quasar.dev/quasar-cli-webpack/developing-electron-apps/troubleshooting-and-tips) + +Browser Extensions mode + +[Introduction](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/introduction) [Preparation](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/preparation) [Configuring BEX](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/configuring-bex) [App Icons for BEX](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/app-icons-browser-extension) [Build Commands](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/build-commands) [Types of BEX](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/types-of-bex) [BEX Bridge Communication](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/bex-bridge) [Background Script](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/background-script) [Content Scripts](https://quasar.dev/quasar-cli-webpack/developing-browser-extensions/content-scripts) + +[Ajax Requests](https://quasar.dev/quasar-cli-webpack/ajax-requests) [Opening Dev Server To Public](https://quasar.dev/quasar-cli-webpack/opening-dev-server-to-public) + +_stars_ + +Icon Genie CLI + +[Introduction](https://quasar.dev/icongenie/introduction) [Installation / Upgrade notes](https://quasar.dev/icongenie/installation) [Command list](https://quasar.dev/icongenie/command-list) [App Icons List](https://quasar.dev/icongenie/app-icons-list) [Profile files](https://quasar.dev/icongenie/profile-files) + +_note\_add_ + +App Extensions + +[Introduction](https://quasar.dev/app-extensions/introduction) [Discover App Extensions](https://quasar.dev/app-extensions/discover) + +Development Guide + +[Introduction](https://quasar.dev/app-extensions/development-guide/introduction) [Prompts API](https://quasar.dev/app-extensions/development-guide/prompts-api) [Install API](https://quasar.dev/app-extensions/development-guide/install-api) [Index API](https://quasar.dev/app-extensions/development-guide/index-api) [Uninstall API](https://quasar.dev/app-extensions/development-guide/uninstall-api) + +Tips and Tricks + +[Introduction](https://quasar.dev/app-extensions/tips-and-tricks/introduction) [Provide a UI component](https://quasar.dev/app-extensions/tips-and-tricks/provide-a-ui-component) [Provide a directive](https://quasar.dev/app-extensions/tips-and-tricks/provide-a-directive) [Inject Quasar Plugin](https://quasar.dev/app-extensions/tips-and-tricks/inject-quasar-plugin) [Starter kit equivalent](https://quasar.dev/app-extensions/tips-and-tricks/starter-kit-equivalent) [Chain Webpack](https://quasar.dev/app-extensions/tips-and-tricks/chain-webpack) + +_healing_ + +Quasar Utils + +[Date Utils](https://quasar.dev/quasar-utils/date-utils) [Color Utils](https://quasar.dev/quasar-utils/color-utils) [DOM Utils](https://quasar.dev/quasar-utils/dom-utils) [Morph Utils](https://quasar.dev/quasar-utils/morph-utils) [Formatter Utils](https://quasar.dev/quasar-utils/formatter-utils) [Scrolling Utils](https://quasar.dev/quasar-utils/scrolling-utils) [Type Checking Utils](https://quasar.dev/quasar-utils/type-checking-utils) [EventBus Util](https://quasar.dev/quasar-utils/event-bus-util) [Other Utils](https://quasar.dev/quasar-utils/other-utils) + +Icon + +[Options & Helpers\\ +\\ +Installing Icon Libraries](https://quasar.dev/options/installing-icon-libraries) [Options & Helpers\\ +\\ +Quasar Icon Sets](https://quasar.dev/options/quasar-icon-sets) + +The QIcon component allows you to easily insert icons within other components or any other area of your pages. Quasar supports out of the box: [Material Icons](https://fonts.google.com/icons?icon.set=Material+Icons) , [Material Symbols](https://fonts.google.com/icons?icon.set=Material+Symbols) , [Font Awesome](https://fontawesome.com/icons), [Ionicons](http://ionicons.com/), [MDI](https://materialdesignicons.com/), [Eva Icons](https://akveo.github.io/eva-icons), [Themify Icons](https://themify.me/themify-icons), [Line Awesome](https://icons8.com/line-awesome) and [Bootstrap Icons](https://icons.getbootstrap.com/). + +Furthermore you can [add support by yourself](https://quasar.dev/vue-components/icon#custom-mapping) for any icon lib. + +There are multiple types of icons in Quasar: webfont-based, svg-based and image-based. You are not bound to using only one type in your website/app. + +TIP + +Related pages: [Installing Icon Libraries](https://quasar.dev/options/installing-icon-libraries) and [Quasar Icon Sets](https://quasar.dev/options/quasar-icon-sets). + +QIcon API + +props + +6 + +slots + +1 + +* * * + +content + +3 + +model + +1 + +style + +2 + +* * * + +tag + +: String + +Description + +HTML tag to render, unless no icon is supplied or it's an svg icon + +left + +: Boolean + +Description + +Useful if icon is on the left side of something: applies a standard margin on the right side of Icon + +right + +: Boolean + +Description + +Useful if icon is on the right side of something: applies a standard margin on the left side of Icon + +## Size & colors + +The sizing of a QIcon is manipulated by the `font-size` CSS property. Also, QIcon inherits the current CSS text `color` used. For ease of use there are the QIcon `size` and `color` props. + +Basic + +* * * + +_code_ + +Template + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +_font\_download_ _warning_ _format\_size_ _print_ _today_ _style_ + +_font\_download_ _warning_ _format\_size_ _print_ _today_ _style_ + +For `icon` properties on different Quasar components you won’t have the means to specify an icon for each platform, but you can achieve the same effect with: + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +Standard sizes + +* * * + +_code_ + +Template + +* * * + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +* * * + +_font\_download_ _font\_download_ _font\_download_ _font\_download_ _font\_download_ + +## Webfont icons + +WARNING + +If you are using webfont-based icons, make sure that you [installed the icon library](https://quasar.dev/options/installing-icon-libraries) that you are using, otherwise it won’t show up! + +### Webfont usage + +``` + +``` + +_content\_paste_ + +Copied to clipboard + +| Quasar IconSet name | Name prefix | Examples | Notes | +| --- | --- | --- | --- | +| material-icons | _None_ | thumb\_up | Notice the underline character instead of dash or space | +| material-icons-outlined | o\_ | o\_thumb\_up | Notice the underline character instead of dash or space | +| material-icons-round | r\_ | r\_thumb\_up | Notice the underline character instead of dash or space | +| material-icons-sharp | s\_ | s\_thumb\_up | Notice the underline character instead of dash or space | +| material-symbols-outlined | sym\_o\_ | sym\_o\_thumb\_up | Notice the underline character instead of dash or space | +| material-symbols-rounded | sym\_r\_ | sym\_r\_thumb\_up | Notice the underline character instead of dash or space | +| material-symbols-sharp | sym\_s\_ | sym\_s\_thumb\_up | Notice the underline character instead of dash or space | +| ionicons-v4 | ion-, ion-md-, ion-ios-, ion-logo- | ion-heart, ion-logo-npm, ion-md-airplane | Use QIcon instead of `` component; Logo icons require ‘ion-logo-’ prefix | +| fontawesome-v6 | fa-\[solid,regular,brands\] fa- | “fa-solid fa-ambulance” | QIcon “name” property is same as “class” attribute value in Fontawesome docs examples (where they show `` tags) | +| fontawesome-v6 Pro | fa-\[solid,regular,brands,thin,light,duotone\] fa- | “fa-solid fa-ambulance” | Note: a license must be purchased from Fontawesome for this functionality) | +| fontawesome-v5 | fa\[s,r,l,d,b\] fa- | “fas fa-ambulance” | QIcon “name” property is same as “class” attribute value in Fontawesome docs examples (where they show `` tags) | +| mdi-v7/v6/v5/v4/v3 | mdi- | mdi-alert-circle-outline | Notice the use of dash characters; Use only one of mdi-v7, mdi-v6, mdi-v5, mdi-v4 or mdi-v3 | +| eva-icons | eva- | eva-shield-outline, eva-activity-outline | Notice the use of dash characters | +| themify | ti- | ti-hand-point-up | Notice the use of dash characters | +| line-awesome | la\[s,r,l,d,b\] la- | “las la-atom” | QIcon “name” property is same as “class” attribute value in Line Awesome docs examples (where they show `` tags); **@quasar/extras v1.5+** | +| bootstrap-icons | bi- | bi-bug-fill | Notice the use of dash characters; **@quasar/extras v1.10+** | + +### Naming convention + +#### Material Icons (Google) + +- Icon names are always in snake\_case. +- Go to [Material Icons and Symbols](https://material.io/icons/), look for your desired icon. Remember its name (eg. “all\_inbox”) and use it. + +#### MDI (Material Design Icons) + +- Icon names are in hyphen-separated case and always begin with “mdi-” prefix. +- Go to [MDI](https://materialdesignicons.com/), look for your desired icon, click on it. A dialog box will appear. Get the title (eg. “account-key”), prefix it with “mdi-” and you get the result (eg. “mdi-account-key”). + +#### Fontawesome + +- Icon names are in hyphen-serapated case and always begin with “fas fa-”, “fab fa-”, “fal fa-” or “far fa-” prefixes. +- Newer versions also have `fa-solid`, `fa-brands`, `fa-light` or `fa-regular` (pro also has `fa-thin`, `fa-duotone`) +- Go to [FontAwesome](https://fontawesome.com/icons), look for your desired icon, click on it. You’ll get to its page. Below the icon name (as title), you will see something like ``. The result is `fa-solid fa-flag` (you can also use `fas fa-flag`). +- Note: `fas`, `far`, `fab`, `fal`, `fat` and `fad` are deprecated and may not be available in future major versions). + +#### Ionicons + +- Icon names are in hyphen-separated case and always begin with “ion-”, “ion-md-”, “ion-ios-” or “ion-logo-” prefixes. +- Go to [Ionicons (v4)](https://ionicons.com/v4), look for your desired icon, and click on it. At the bottom of the page, a popup will appear. Notice something like ``. Remember the name (eg. “square-outline”). Based on the variant that you want (auto-detect platform, material, or iOS), you’d get the result: `ion-square-outline` or `ion-md-square-outline` or `ion-ios-square-outline`. +- **Note:** Starting with v5, Ionicons no longer supplies a webfont. Also, they no longer have Material or IOS variants. + +#### Eva Icons + +- Icon names are in hyphen-separated case and always begin with “eva-” prefix. +- Go to [Eva Icons](https://akveo.github.io/eva-icons), look for your desired icon, click on it. A dialog box will appear. Get the name from there (eg. “attach-outline”), prefix it with “eva” and the result is “eva-attach-outline”. + +#### Themify + +- Icon names are in hyphen-separated case and always begin with “ti-” prefix. +- Go to [Themify](https://themify.me/themify-icons), look for your desired icon. Remember its name (eg. “ti-arrow-top-right”) and use it. + +#### Line Awesome + +- Icon names are in hyphen-separated case and always begin with “la” prefix. +- Go to [Line Awesome](https://icons8.com/line-awesome), look for your desired icon, click on it. A dialog box will appear. You’ll see something like ``. Remember its name (eg. “lab la-behance-square”) and use it. + +#### Bootstrap Icons + +- Icon names are in hyphen-separated case and always begin with “bi-” prefix. +- Go to [Bootstrap Icons](https://icons.getbootstrap.com/), look for your desired icon. Remember its name (eg. “bi-bug-fill”) and use it. + +## Svg icons + +There are many advantages of using only svg icons in your website/app: + +- Better app footprint – only used icons will be included in the final build (treeshaking in action) +- Better quality icons +- No need for including equivalent webfonts from `@quasar/extras` or CDN. + +The current disadvantage is that it is more tedious to use these icons than their webfont counterpart. + +### Svg usage + +Usage inside the `