quasar

library1.13.1jsnpmunverified

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.

web-framework

npm install quasar

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · QUASAR

quasar

web-frameworkjavascriptv1.13.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Quasar

✓ import { Quasar } from 'quasar'

✗ import Quasar from 'quasar'

The main Quasar plugin is a named export and is used to initialize the framework within a Vue application via `app.use(Quasar, options)`.

useQuasar

✓ import { useQuasar } from 'quasar'

✗ const { useQuasar } = require('quasar')

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.

QBtn

✓ import { QBtn } from 'quasar'

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.

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.

import { createApp } from 'vue' import App from './App.vue' import { Quasar, Dialog, Notify } from 'quasar' // Import Quasar css import 'quasar/src/css/index.sass' // Import icon libraries (optional, but commonly used) import '@quasar/extras/material-icons/material-icons.css' // === main.ts === const app = createApp(App) app.use(Quasar, { plugins: { Dialog, Notify }, // Register Quasar plugins config: { // Optionally configure global settings for Quasar brand: { primary: '#1976D2', secondary: '#26A69A' } } }) app.mount('#app') // === App.vue === <template> <q-layout view="lHh Lpr lFf" class="q-pa-md"> <q-header elevated class="bg-primary text-white"> <q-toolbar> <q-toolbar-title> Quasar Quickstart App </q-toolbar-title> <div>Quasar v{{ quasarVersion }}</div> </q-toolbar> </q-header> <q-page-container> <q-page class="flex flex-center column q-gutter-md q-pt-xl"> <q-btn color="primary" label="Show Dialog" @click="showDialog" /> <q-btn color="secondary" label="Show Notification" @click="showNotification" /> </q-page> </q-page-container> </q-layout> </template> <script setup lang="ts"> import { version as quasarVersion, useQuasar } from 'quasar' const $q = useQuasar() function showDialog() { $q.dialog({ title: 'Hello', message: 'This is a Quasar dialog from useQuasar().', persistent: true }) } function showNotification() { $q.notify({ message: 'Welcome to Quasar!', color: 'positive', textColor: 'white', icon: 'check_circle', position: 'top-right' }) } </script> <style lang="sass"> .q-page min-height: 400px background-color: #f5f5f5 </style>

Debug

Known issues

breakingThe `@quasar/cli` package (v3.0.0 and above) now requires Node.js >= 20.20. Running with older Node.js versions will result in errors.

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.

affects: >=3.0.0

breakingWhen 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.

fix

Review the `proxy` configuration in your `quasar.config.js` and adjust rules according to the `http-proxy-middleware` v3 documentation for breaking changes.

affects: >=3.0.0

breakingFor `@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.

fix

Manually update file paths in your `/src-ssr` folder, replacing instances of `{*path}` with `*`.

affects: >=2.6.0

breakingAs 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.

fix

Ensure your target browsers and Node.js environment meet the new minimum requirements. Consider updating your build targets if necessary.

affects: >=2.19.0

gotchaThe 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.

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.

affects: >=2.19.0

Errors

Common errors & fixes

Error: The client-side rendered app could not be hydrated, because no matching SSR markup was found.

Incorrect SSR pathing configuration in `@quasar/app-vite` after version 2.6.0 due to a breaking change.

fix

In your `/src-ssr` folder, locate files or configurations using `{*path}` and replace it with `*`.

Error: You are running Node.js version X.X.X. Quasar CLI requires Node.js >= 20.20.

Your Node.js version is older than the minimum required by `@quasar/cli` v3.0.0 or later.

fix

Update your Node.js installation to version 20.20 or newer using a Node Version Manager (NVM) or official installers.

TypeError: Cannot read properties of undefined (reading 'dialog') OR 'this.$q' is undefined

`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)`.

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()`.

Upgrade

Version history

1.13.1latest on npm

Audit

Dependencies

@quasar/app-webpackoptionalEssential for setting up and building Quasar projects using Webpack.

@quasar/app-viteoptionalAlternative to app-webpack for setting up and building Quasar projects using Vite.

@quasar/clioptionalProvides global Quasar CLI commands for project creation and management.

@quasar/extrasoptionalProvides common icon sets (Material Icons, Font Awesome, Ionicons) and animations.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/quasarframework/quasar ↗

packagehttps://www.npmjs.com/package/quasar ↗

homepagehttps://quasar.dev ↗