UMD（CDN）版QuasarでNotify（通知）コンポーネントを使う

UMD（CDN）版のQuasarをOptions APIで使っていて、Notifyコンポーネントを使用するのに苦戦したので、参考に記事にします。

この方法が最適な方法なのかどうかは正直よくわからないので、参考程度に・・・

QuasarのCDNインストール

Quasar公式ドキュメントで、CDNを導入するためのコードが取得できます。

とりあえず、Quasar Language Packだけ日本語（日本語）に変更して、それ以外はそのままにしました。
表示されるコードをそのままhtmlファイルに貼り付けます。

Quasar UMD - CDN install | Quasar Framework
How to use the Unified Module Definition form of Quasar.
quasar.dev

Notifyコンポーネントを使う

下記ページ内のサンプルコードを貼り付け・・・ても動きません。(方法はあるかもしれませんが）

Notify | Quasar Framework
A Quasar plugin to display animated messages to users like notifications, toasts and snackbars.
quasar.dev

以下のように、Quasarグローバルオブジェクトを使うことで、CDNインストールでもNotifyを使うことができました。

  • Basic
<!-- HTML部分抜粋 -->
<q-btn color="purple" @click="showNotif" label="Show Notification"></q-btn>
// Vue メソッド部分抜粋
methods: {
  showNotif () {
    Quasar.Notify.create('Danger, Will Robinson! Danger!')
  },
}
  • Predefined types – Trigger ‘ongoing’
<!-- HTML部分抜粋 -->
<q-btn no-caps unelevated color="grey-8" @click="triggerOngoing" label="Trigger 'ongoing'"></q-btn>
// Vue メソッド部分抜粋
methods: {
  triggerOngoing () {
    const notif = Quasar.Notify.create({
      type: 'ongoing',
      message: 'Looking up the search terms...'
    })

    // simulate delay
    setTimeout(() => {
      notif({
        type: 'positive',
        message: 'Found the results that you were looking for',
        timeout: 1000
      })
    }, 4000)
  }
}

コメント