🏠 Home / Hub

🔷 Quasar Lesson 06 — Notify, Dialog & Plugins

← Back to Quasar Menu  |  🏠 Hub

1. Notify Plugin — Toast Messages

// quasar.config.js မှာ enable လုပ်
plugins: ['Notify']

// Component ထဲ သုံး
this.$q.notify('Simple message')

this.$q.notify({
  message: 'Saved successfully!',
  color: 'positive',
  icon: 'check_circle',
  position: 'top-right',   // top, bottom, left, right, center
  timeout: 3000
})

this.$q.notify({
  message: 'Delete this item?',
  color: 'negative',
  actions: [
    { label: 'Undo', color: 'white', handler: () => { /* undo */ } }
  ]
})
color: positive (green) · negative (red) · warning (yellow) · info (blue) · dark

2. Dialog Plugin — Confirmation

// quasar.config.js
plugins: ['Dialog']

// Confirm dialog
this.$q.dialog({
  title: 'Confirm',
  message: 'Are you sure you want to delete?',
  cancel: true,
  persistent: true
}).onOk(() => {
  console.log('Confirmed! Deleting...')
}).onCancel(() => {
  console.log('Cancelled')
})

// Input dialog
this.$q.dialog({
  title: 'Enter Name',
  prompt: {
    model: '',
    type: 'text'
  },
  cancel: true
}).onOk(data => {
  console.log('Input:', data)
})

3. Loading Plugin

plugins: ['Loading']

// Show loading
this.$q.loading.show({
  message: 'Please wait...',
  spinnerColor: 'primary'
})

// Hide loading
this.$q.loading.hide()

// Usage with API call
async fetchData() {
  this.$q.loading.show()
  try {
    const res = await fetch('/api/data')
    this.data = await res.json()
  } finally {
    this.$q.loading.hide()
  }
}

4. Dark Mode & Screen

// Dark mode toggle
this.$q.dark.toggle()
this.$q.dark.set(true)
this.$q.dark.isActive  // boolean

// Screen size detection
this.$q.screen.xs   // mobile
this.$q.screen.sm
this.$q.screen.md
this.$q.screen.lg
this.$q.screen.xl

// Responsive in template
<q-btn :label="$q.screen.gt.sm ? 'Save Changes' : 'Save'" />
<div :class="$q.screen.lt.md ? 'col-12' : 'col-6'">

5. Axios Boot File — API Calls

// boot/axios.js
import axios from 'axios'

const api = axios.create({ baseURL: 'https://api.example.com' })

export default boot(({ app }) => {
  app.config.globalProperties.$axios = axios
  app.config.globalProperties.$api = api
})

export { api }

// Component မှာ သုံး
import { api } from 'boot/axios'

async getUsers() {
  const { data } = await api.get('/users')
  this.users = data
}

🎉 Quasar Complete!

Setup, Components, Layout, Forms, QTable, Plugins — ပြည့်ပြည့်စုံစုံ သင်ပြီးပြီ!

🏠 Hub ☁️ AWS →

← Quasar 05  |  ☁️ Next: AWS →

📌 Study Checklist