🏠 Home / Hub
🔷

Quasar Framework

Vue.js အပေါ် အခြေခံတဲ့ Full-stack UI Framework
Mobile App, Desktop App, Web App — တစ်ချက်တည်းနဲ့

Vue.js သိပြီးမှ သင်ပါ — Vue.js prerequisite required

🔷 Quasar ဆိုတာ: Vue.js 3 အပေါ် တည်ဆောက်ထားတဲ့ framework — Material Design components တွေ built-in ပါတယ်
📱 တစ်ကြိမ် ရေး: Web SPA / PWA / Mobile (Capacitor) / Desktop (Electron) — code base တစ်ခုတည်းနဲ့
⚙️ Run ဖို့: Node.js + Quasar CLI လိုတယ် — npm install -g @quasar/cli
Part 1 — Getting Started
01
⚙️

Setup & Project Structure

Quasar CLI install, project create, folder structure, quasar.config.js

CLIquasar createquasar dev
02
🧩

UI Components

QBtn, QInput, QCard, QIcon, QBadge, QAvatar — Material Design

QBtnQInputQCard
Part 2 — Layout & Features
03
🏗️

Layout & Navigation

QLayout, QHeader, QFooter, QDrawer (sidebar), QPage, QTabs

QLayoutQDrawerQTabs
04
📝

Forms & Validation

QForm, QInput rules, QSelect, QCheckbox, QRadio, QToggle

QFormrulesvalidate()
Part 3 — Data & Plugins
05
📊

QTable & Data Display

QTable columns/rows, pagination, filtering, sorting, QList, QItem

QTablecolumnspagination
06
🔔

Notify, Dialog & Plugins

$q.notify(), $q.dialog(), Loading, Dark mode, Screen plugin

$q.notifyDialogLoading

📋 Quasar Quick Reference

CLI Commands

quasar create my-app
quasar dev
quasar build
quasar dev -m capacitor

Common Components

<q-btn label="Click" />
<q-input v-model="val" />
<q-card><q-card-section>
<q-icon name="home" />

Layout

<q-layout view="hHh lpR fFf">
<q-header><q-toolbar>
<q-drawer side="left">
<q-page-container>

Plugins ($q)

$q.notify({ message })
$q.dialog({ title })
$q.loading.show()
$q.dark.toggle()

📌 Study Checklist