vue-toastedで処理成功時・エラー時の通知を楽に実装する（laravel×vue.js）

vue-toastedは処理成功したときの「処理が完了しました」やエラーが発生したときの「エラーが発生しました」の実装がかんたんにできるライブラリです。

そもそも、 真ん中の下や右上あたりからすっと通知が出てきて、すっと隠れるやつを「トースター」っていうんですね。

ではさっそく使ってみます。

vue-toastedをインストールする

ささっとインストールしちゃいます。

npm install vue-toasted --save

app.jsでインポートする

このあたりはライブラリを使うときのルーティーンですね。app.jsでインポートします

import Toasted from 'vue-toasted';

Vue.use(Toasted, {
  position: 'bottom-center',
  duration: 2000,
});

optionは公式ページにいろいろ載っています
https://www.npmjs.com/package/vue-toasted

vue.js内でトースターを呼び出すためのメソッドを記述します

<template lang="pug">
div.flex.items-center.justify-center.h-screen(@click="sayHello") クリック
</template>
<script>
export default {
  created() {
  },
  computed: {
  },
  props: {
  },
  data() {
    return {
    }
  },
  methods: {
    sayHello:function(){
      this.$toasted.success('hello!');
    }
  }
}
</script>
<style lang='sass' scoped>


</style>

これでsayHelloを呼び出すとこんな感じになります
（クリックを押したらトースターが出るようになってます）

めっちゃかんたん！

通知の色を変えたい時

まさかの色を指定するための設定がないようです。
トースターにクラス名を付けて、そのクラスに !important付きで background-colorの指定をしたら色を変えることができます。

僕はこのように設定してます

Vue.use(Toasted, {
  position: 'bottom-center',
  duration: 3000,
  className: ['bg-main', 'text-black', 'font-bold', 'px-16', 'py-4', 'rounded-md']
});

しかし、 これだとsuccessもerrorも全部色が変わってしまいます。
僕の場合はerrorのときの通知をこれでしない想定なので別に良いのですが、
他に方法があったら、追記しておきます！