Menu
Home
People
Places
Arts
History
Plants & Animals
Science
Life & Culture
Technology
Reference.org
Quasar Framework
open-in-new
<h2 id="overview">Overview</h2> <p>Quasar focuses on building <a href="/facts/Vue.js/AojblWPD">VueJS</a> user interfaces quickly. The user only needs to write one authoritative source of code for all <a href="/facts/Platforms_(computing)/DmKwp5Bk">platforms</a>: responsive desktop/mobile websites (<a href="/facts/Single-page_application/6zsdUkxD">SPA</a>, SSR + SPA client takeover, SSR + PWA client takeover), PWAs (<a href="/facts/Progressive_web_app/IpkL2Yhb">Progressive Web Apps</a>), mobile apps (that look native) and multi-platform desktop apps (through <a href="/facts/Electron_(software_framework)/15eHlAWQ">Electron</a>) and also <a href="/facts/Browser_extension/jzkeh57V">browser extensions</a>.<a class="footnote-ref" id="fnref:5" href="#fn:5"><sup>5</sup></a> </p><p>Quasar is designed with performance, responsiveness and inter-operability in mind.<a class="footnote-ref" id="fnref:6" href="#fn:6"><sup>6</sup></a> </p> <h2 id="history">History</h2> <p>Quasar was created by Razvan Stoenescu after working for <a href="/facts/IBM/QszA7nwd">IBM</a> and <a href="/facts/Lenovo/4UNdKGUU">Lenovo</a> using constantly new and different software tools to create all the separate types of iOS apps, Android apps, web applications, Windows Desktop apps, Apple Desktop apps, and PWAs. He later summed up his thought process: "I longed for a single framework that would remove all the complexity and produce all these different flavors of apps … from a SINGLE codebase. Unable to locate such a mythical tool, I decided to build it."<a class="footnote-ref" id="fnref:7" href="#fn:7"><sup>7</sup></a><a class="footnote-ref" id="fnref:8" href="#fn:8"><sup>8</sup></a> </p><p>The first source code commit to the project was dated 2015, and Quasar stable 1.0 release was released in July 2019. The first Quasar conference took place in July 2020.<a class="footnote-ref" id="fnref:9" href="#fn:9"><sup>9</sup></a> Quasar v2 (with Vue.js 3) went stable in 2.0.0 release in June 2021. </p> <h2 id="features">Features</h2> <h3>Components</h3> <p>Quasar apps are built using <a href="https://quasar.dev/start/how-to-use-vue#vue-single-file-components-sfc-">Vue Single File Components</a> and <a href="https://quasar.dev/start/how-to-use-vue#using-quasar-components">Quasar Components</a>. Vue Single file components contain multiple sections: template (HTML), script (Javascript) and style (CSS/Stylus/SASS/SCSS/Less) - all in the same file.<a class="footnote-ref" id="fnref:10" href="#fn:10"><sup>10</sup></a> The code snippet below contains an example of the structure of a Vue Single File Component: </p> <template> <!-- you define your Vue template here --> </template> <script setup> // This is where your Javascript goes // to define your Vue component, which // can be a Layout, a Page or your own // component used throughout the app. </script> <style> /* This is where your CSS goes */ </style> <p>Quasar components are HTML tags that begin with q and link to the /quasar.config file. </p><h2 id="ecosystem">Ecosystem</h2> <p>The core library comes with tools and libraries both developed by the core team and contributors. </p> <h3>Official tooling</h3> <p>Quasar Framework consists of several key components: </p> Quasar CLI A command-line interface tool that facilitates the creation and development of cross-platform applications. It provides a global environment for app initialization and management. Quasar App The local development and build environment within the Quasar CLI. It includes: <ul><li>A development server for real-time previewing of changes</li> <li>Build systems for deploying applications to multiple platforms, including: <ul><li>Web</li> <li><a href="/facts/Progressive_web_application/IpkL2Yhb">Progressive Web Applications (PWA)</a></li> <li>Server-Side Rendering (SSR)</li> <li><a href="/facts/Apache_Cordova/02wYWdWr">Cordova</a></li> <li>Capacitor</li> <li><a href="/facts/Electron_(software_framework)/15eHlAWQ">Electron</a></li> <li><a href="/facts/Browser_extension/jzkeh57V">Browser Extensions</a></li></ul></li></ul> Quasar UI A comprehensive library of user interface components designed for use within Quasar applications. <h2 id="see-also">See also</h2> <ul> <li>Free and open-source software portal</li></ul> <ul><li><a href="/facts/Comparison_of_JavaScript_frameworks/74bS48ah">Comparison of JavaScript frameworks</a></li> <li><a href="/facts/JavaScript_framework/8f1CVHDX">JavaScript framework</a></li> <li><a href="/facts/JavaScript_library/vjUJ5DGC">JavaScript library</a></li> <li><a href="/facts/List_of_rich_web_application_frameworks/6SdIW8cN">List of rich web application frameworks</a></li></ul> <h2 id="sources">Sources</h2> <p> This article incorporates text from a <a href="/facts/Free_content/jHYHARSN">free content</a> work. Licensed under <a href="/facts/MIT_License/8llAQtlk">MIT License</a> (<a href="https://github.com/quasarframework/new-issue.quasar.dev/blob/master/LICENSE">license statement/permission</a>). Text taken from <a href="https://quasar.dev/"><i>Quasar Framework Guide</i></a>, Quasar Framework. </p> <h2 id="external-links">External links</h2> <ul><li><a href="https://quasar.dev">Official website</a></li></ul> <h2 id="references">References</h2> <ol> <li id="fn:1"><p>"Guide: What is Quasar?". Quasar Framework. Retrieved May 20, 2020. <a href="https://quasar.dev/introduction-to-quasar#What-is-Quasar%3F#What-is-Quasar-js" target="_blank">https://quasar.dev/introduction-to-quasar#What-is-Quasar%3F#What-is-Quasar-js</a> <a href="#fnref:1" class="footnote-back-ref">↩</a></p></li> <li id="fn:2"><p>Connell, Danny (2020). Quasar Framework: Cross-Platform Vue JS Vuex & Firebase Apps. Udemy. <a href="https://www.udemy.com/course/quasarframework/" target="_blank">https://www.udemy.com/course/quasarframework/</a> <a href="#fnref:2" class="footnote-back-ref">↩</a></p></li> <li id="fn:3"><p>"Guide: What is Quasar?". Quasar Framework. Retrieved May 20, 2020. <a href="https://quasar.dev/introduction-to-quasar#What-is-Quasar%3F#What-is-Quasar-js" target="_blank">https://quasar.dev/introduction-to-quasar#What-is-Quasar%3F#What-is-Quasar-js</a> <a href="#fnref:3" class="footnote-back-ref">↩</a></p></li> <li id="fn:4"><p>"Meet the Team — Quasar Framework". quasar-framework.org. Retrieved May 20, 2020. <a href="https://quasar.dev/meet-the-team" target="_blank">https://quasar.dev/meet-the-team</a> <a href="#fnref:4" class="footnote-back-ref">↩</a></p></li> <li id="fn:5"><p>"Guide: What is Quasar?". Quasar Framework. Retrieved May 20, 2020. <a href="https://quasar.dev/introduction-to-quasar#What-is-Quasar%3F#What-is-Quasar-js" target="_blank">https://quasar.dev/introduction-to-quasar#What-is-Quasar%3F#What-is-Quasar-js</a> <a href="#fnref:5" class="footnote-back-ref">↩</a></p></li> <li id="fn:6"><p>"Guide: What is Quasar?". Quasar Framework. Retrieved May 20, 2020. <a href="https://quasar.dev/introduction-to-quasar#What-is-Quasar%3F#What-is-Quasar-js" target="_blank">https://quasar.dev/introduction-to-quasar#What-is-Quasar%3F#What-is-Quasar-js</a> <a href="#fnref:6" class="footnote-back-ref">↩</a></p></li> <li id="fn:7"><p>Stoenescu, Razvan (July 3, 2019). "Why every Vue developer should be excited by Quasar 1.0". Quasar Framework. <a href="https://medium.com/quasar-framework/quasar-1-0-4bc696d60c1b/" target="_blank">https://medium.com/quasar-framework/quasar-1-0-4bc696d60c1b/</a> <a href="#fnref:7" class="footnote-back-ref">↩</a></p></li> <li id="fn:8"><p>"Guide: What is Quasar?". Quasar Framework. Retrieved May 20, 2020. <a href="https://quasar.dev/introduction-to-quasar#What-is-Quasar%3F#What-is-Quasar-js" target="_blank">https://quasar.dev/introduction-to-quasar#What-is-Quasar%3F#What-is-Quasar-js</a> <a href="#fnref:8" class="footnote-back-ref">↩</a></p></li> <li id="fn:9"><p>"Quasar.conf 2020". July 5, 2020. <a href="#fnref:9" class="footnote-back-ref">↩</a></p></li> <li id="fn:10"><p>"Vue Single File Components (SFC) — Quasar Framework". Retrieved May 22, 2020. <a href="https://quasar.dev/start/how-to-use-vue#Vue-Single-File-Components-(SFC)" target="_blank">https://quasar.dev/start/how-to-use-vue#Vue-Single-File-Components-(SFC)</a> <a href="#fnref:10" class="footnote-back-ref">↩</a></p></li> </ol>