{"id":13838,"library":"quasar","title":"Quasar Framework","description":"Quasar Framework is an MIT-licensed open-source Vue.js framework for building high-performance, cross-platform user interfaces from a single codebase. It enables developers to create responsive Single Page Applications (SPA), Server-Side Rendered (SSR) Apps, Progressive Web Apps (PWA), Browser Extensions, Hybrid Mobile Apps (Capacitor/Cordova), and Electron Apps. The current stable version of the core UI package is 2.19.3. Quasar typically follows a frequent release cadence for minor and patch versions, while its associated CLI and app-building packages (`@quasar/cli`, `@quasar/app-webpack`, `@quasar/app-vite`) have their own independent, though coordinated, release cycles. Its key differentiators include a comprehensive set of highly optimized Vue components, a robust CLI, and a powerful build system that abstracts away complex configurations for various deployment targets.","status":"active","version":"2.19.3","language":"javascript","source_language":"en","source_url":"https://github.com/quasarframework/quasar","tags":["javascript","desktop","electron","js","phone","pwa","quasar","spa","tablet","typescript"],"install":[{"cmd":"npm install quasar","lang":"bash","label":"npm"},{"cmd":"yarn add quasar","lang":"bash","label":"yarn"},{"cmd":"pnpm add quasar","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Essential for setting up and building Quasar projects using Webpack.","package":"@quasar/app-webpack","optional":true},{"reason":"Alternative to app-webpack for setting up and building Quasar projects using Vite.","package":"@quasar/app-vite","optional":true},{"reason":"Provides global Quasar CLI commands for project creation and management.","package":"@quasar/cli","optional":true},{"reason":"Provides common icon sets (Material Icons, Font Awesome, Ionicons) and animations.","package":"@quasar/extras","optional":true}],"imports":[{"note":"The main Quasar plugin is a named export and is used to initialize the framework within a Vue application via `app.use(Quasar, options)`.","wrong":"import Quasar from 'quasar'","symbol":"Quasar","correct":"import { Quasar } from 'quasar'"},{"note":"The `useQuasar` composition API function provides access to Quasar plugins (Dialog, Notify, Loading, etc.) and global properties within Vue components. It's only available within `setup()` or composition API contexts.","wrong":"const { useQuasar } = require('quasar')","symbol":"useQuasar","correct":"import { useQuasar } from 'quasar'"},{"note":"While direct component imports are possible, Quasar CLI projects commonly use `quasar.config.js` to automatically tree-shake and globally register components specified in the `components` array. If not using Quasar CLI, or if a component is not auto-imported, it must be explicitly imported and registered in the Vue app or component.","symbol":"QBtn","correct":"import { QBtn } from 'quasar'"}],"quickstart":{"code":"import { createApp } from 'vue'\nimport App from './App.vue'\nimport { Quasar, Dialog, Notify } from 'quasar'\n\n// Import Quasar css\nimport 'quasar/src/css/index.sass'\n\n// Import icon libraries (optional, but commonly used)\nimport '@quasar/extras/material-icons/material-icons.css'\n\n// === main.ts ===\nconst app = createApp(App)\n\napp.use(Quasar, {\n  plugins: { Dialog, Notify }, // Register Quasar plugins\n  config: {\n    // Optionally configure global settings for Quasar\n    brand: {\n      primary: '#1976D2',\n      secondary: '#26A69A'\n    }\n  }\n})\n\napp.mount('#app')\n\n// === App.vue ===\n<template>\n  <q-layout view=\"lHh Lpr lFf\" class=\"q-pa-md\">\n    <q-header elevated class=\"bg-primary text-white\">\n      <q-toolbar>\n        <q-toolbar-title>\n          Quasar Quickstart App\n        </q-toolbar-title>\n        <div>Quasar v{{ quasarVersion }}</div>\n      </q-toolbar>\n    </q-header>\n\n    <q-page-container>\n      <q-page class=\"flex flex-center column q-gutter-md q-pt-xl\">\n        <q-btn color=\"primary\" label=\"Show Dialog\" @click=\"showDialog\" />\n        <q-btn color=\"secondary\" label=\"Show Notification\" @click=\"showNotification\" />\n      </q-page>\n    </q-page-container>\n  </q-layout>\n</template>\n\n<script setup lang=\"ts\">\nimport { version as quasarVersion, useQuasar } from 'quasar'\n\nconst $q = useQuasar()\n\nfunction showDialog() {\n  $q.dialog({\n    title: 'Hello',\n    message: 'This is a Quasar dialog from useQuasar().',\n    persistent: true\n  })\n}\n\nfunction showNotification() {\n  $q.notify({\n    message: 'Welcome to Quasar!',\n    color: 'positive',\n    textColor: 'white',\n    icon: 'check_circle',\n    position: 'top-right'\n  })\n}\n</script>\n\n<style lang=\"sass\">\n.q-page\n  min-height: 400px\n  background-color: #f5f5f5\n</style>","lang":"typescript","description":"This quickstart demonstrates how to initialize Quasar in a Vue 3 application, register essential plugins like Dialog and Notify, and utilize Quasar components and the `useQuasar` composition API within a Vue component. It includes required CSS and icon imports."},"warnings":[{"fix":"Upgrade your Node.js environment to version 20.20 or newer. You can use a tool like NVM (Node Version Manager) for easy switching.","message":"The `@quasar/cli` package (v3.0.0 and above) now requires Node.js >= 20.20. Running with older Node.js versions will result in errors.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Review the `proxy` configuration in your `quasar.config.js` and adjust rules according to the `http-proxy-middleware` v3 documentation for breaking changes.","message":"When using `quasar serve` with proxy functionality in `@quasar/cli` v3.0.0, the proxy rules must be updated to conform to `http-proxy-middleware` v3 specifications due to an internal upgrade.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Manually update file paths in your `/src-ssr` folder, replacing instances of `{*path}` with `*`.","message":"For `@quasar/app-vite` v2.6.0 and later, a breaking change requires updating SSR folder paths: `{*path}` must be replaced with `*` in your `/src-ssr` directory.","severity":"breaking","affected_versions":">=2.6.0"},{"fix":"Ensure your target browsers and Node.js environment meet the new minimum requirements. Consider updating your build targets if necessary.","message":"As of `quasar-v2.19.0`, the standalone/UMD version targets newer minimum browser versions (Chrome/Edge 111, Firefox 114, Safari/iOS 16.4) and Node.js v20 (or v22 for `q/app-vite`). Projects with older targets may experience compatibility issues.","severity":"breaking","affected_versions":">=2.19.0"},{"fix":"No direct fix required, but be aware that build artifacts and behavior might slightly change. Report any unexpected build issues to the Quasar team.","message":"The Quasar build system has shifted to the Oxc+Rolldown ecosystem internally since v2.19.0, resulting in smaller UI dist files. While this is primarily an internal change, it's good to be aware of potential subtle build-related differences.","severity":"gotcha","affected_versions":">=2.19.0"}],"env_vars":null,"search_vec":"'2.19.3':68 'abstract':122 'app':44,47,53,57,87 'app-build':86 'applic':37 'associ':83 'away':123 'browser':49 'build':16,88,119 'cadenc':75 'capacitor/cordova':54 'cli':84,115 'codebas':28 'complex':124 'compon':112 'comprehens':106 'configur':125 'coordin':98 'core':64 'creat':33 'cross':21 'cross-platform':20 'current':59 'cycl':100 'deploy':128 'desktop':131 'develop':31 'differenti':103 'electron':56,132 'enabl':30 'extens':50 'follow':71 'framework':2,4,14 'frequent':73 'high':18,109 'high-perform':17 'hybrid':51 'includ':104 'independ':96 'interfac':24 'javascript':130 'js':133 'key':102 'licens':9 'minor':77 'mit':8 'mit-licens':7 'mobil':52 'open':11 'open-sourc':10 'optim':110 'packag':66,89 'page':36 'patch':79 'perform':19 'phone':134 'platform':22 'power':118 'progress':45 'pwa':48,135 'quasar':1,3,69,136 'quasar/app-vite':92 'quasar/app-webpack':91 'quasar/cli':90 'releas':74,99 'render':42 'respons':34 'robust':114 'server':40 'server-sid':39 'set':107 'side':41 'singl':27,35 'sourc':12 'spa':38,137 'ssr':43 'stabl':60 'system':120 'tablet':138 'target':129 'though':97 'typescript':139 'typic':70 'ui':65 'user':23 'various':127 'version':61,80 'vue':111 'vue.js':13 'web':46","created_at":"2026-04-20T01:56:34.339480+00:00","updated_at":"2026-04-20T01:56:34.339480+00:00","problems":[{"fix":"In your `/src-ssr` folder, locate files or configurations using `{*path}` and replace it with `*`.","cause":"Incorrect SSR pathing configuration in `@quasar/app-vite` after version 2.6.0 due to a breaking change.","error":"Error: The client-side rendered app could not be hydrated, because no matching SSR markup was found."},{"fix":"Update your Node.js installation to version 20.20 or newer using a Node Version Manager (NVM) or official installers.","cause":"Your Node.js version is older than the minimum required by `@quasar/cli` v3.0.0 or later.","error":"Error: You are running Node.js version X.X.X. Quasar CLI requires Node.js >= 20.20."},{"fix":"Ensure `app.use(Quasar, { plugins: { Dialog, Notify }})` is called in your `main.ts` (or `main.js`), and that `useQuasar()` is only called within the `setup()` function of a Vue component or a composition API function that is itself called from `setup()`.","cause":"`useQuasar()` or `this.$q` is being accessed outside of a Vue component's `setup()` context, or before the Quasar plugin has been properly installed with `app.use(Quasar, options)`.","error":"TypeError: Cannot read properties of undefined (reading 'dialog') OR 'this.$q' is undefined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":"1.13.1","cli_name":"","cli_version":null,"type":"library","homepage":"https://quasar.dev","github":"https://github.com/quasarframework/quasar","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/quasar","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}