Nuxt.jsでvue-toast-notificationを利用してtoastを表示する

Nuxtアプリで、Vue.jsプラグインのvue-toast-notificationを利用してトースト通知を表示します。

こんな感じ↓

なぜvue-toast-notificationか

これが良いのは、

• メンテナンスされている
• 少ないコードでOK

というところです。

メンテナンスについては、他のtoastが出せるVueプラグインは多くが2020年で更新が止まっていましたが、こちらは数ヶ月前に最終更新されていて、npmのWeekly Downloadsもかなり多かったので、しっかりメンテナンスされていて今後も問題なさそうと判断しました。Vue3.x系にも対応している点も良いですね。

また、少ないコードで書けるのも良いです。NuxtのUIフレームワークには大体toast(Vuetifyではsnackbar)はあるのですが、地味にコードが長くて辛いのです。
たとえば、vue-toast-notificationなら以下のように書けばtoastを出せます。

this.$vueToast.success('成功')
this.$vueToast.error('エラー')

vue-toast-notification

デモ
https://ankurk91.github.io/vue-toast-notification/

GitHub(Vue2.x)
https://github.com/ankurk91/vue-toast-notification/tree/v1.x

GitHub（Vue3.x）
https://github.com/ankurk91/vue-toast-notification

npm
https://www.npmjs.com/package/vue-toast-notification

開発者(Ankur Kumarさん)
https://twitter.com/ankurk91

インストール

私のアプリケーションはVue2.x系なので、vue-toast-notification0.6をインストールします。Vue3.x系の方は0.6 -> 3.0にしてください。

npm i vue-toast-notification@^0.6

Nuxtのpluginとして設定

Nuxtのpluginとして利用したかったので、pluginsにvue-toast-notification.jsファイルを追加します。

plugins/vue-toast-notification.js

import Vue from 'vue';
import vueToast from 'vue-toast-notification';
import 'vue-toast-notification/dist/theme-sugar.css';
Vue.use(vueToast);

さらに、nuxt.config.jsにpluginとして追加します。

nuxt.config.js

plugins: [
    {
      src: "plugins/vue-toast-notification.js",
      mode: "client",
    },
  ],

vueファイルで利用

あとは好きな場所で利用してください。
記事冒頭でも紹介しましたが、以下のような記述でさまざまなtoastが出せます。

pages/foo.vue

this.$vueToast.success('成功')
this.$vueToast.error('エラー')
this.$vueToast.warning('注意')
this.$vueToast.info('インフォ')

optionsもたくさんあるよ

こういう書き方をすれば、optionsを利用してカスタマイズできます。

this.$vueToast.open({
    type: 'error',
    message: 'エラーですよ',
    // その他optionsをここに書ける
});

optionsはGitHubにあるこちらをご覧ください。これはVue3.x系でも2.x系でも関係ありませんね。
https://github.com/ankurk91/vue-toast-notification#available-options