{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install quasar"],"cli":null},"imports":["import { Quasar } from 'quasar'","import { useQuasar } from 'quasar'","import { QBtn } from 'quasar'"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}