vue でトーストを表示する

2021年8月30日2021年8月31日

toasted というライブラリを使用すると簡単に実装できるようです。

参考

Vue.js vue-toastedをインストールしてNotificationを表示する
「vue-toasted」を使ってNotificationを実装する

インストール

下記のコマンドでライブラリをインストールします。

npm install vue-toasted --save

ライブラリの読み込みと設定

src 配下の main.js に下記のコードを追加しライブラリの読み込みとトーストの設定をします。

...
import Toasted from 'vue-toasted';
...
Vue.use(Toasted, {
  position: 'top-center',
  duration: 3000,
  fitToScreen: true,  
})
...

トーストを表示

下記のように記述する事でトーストを表示できます。

this.$toasted.success("成功しました。");
this.$toasted.error("失敗しました。");

success と error でデフォルトの指定の色が違うようです。
「参考」の二つ目のサイトに記載があるパラメータを設定する事でもっと細かい設定が出来るようです。