【Vue3】で Toast 表示

2021年4月3日

エラーを表示したりリクエストの成功を表示したりとトーストを使う場面は多々あると思いますが、Vue3 でそれを実装するのにおすすめのプラグインを紹介します。

Vue Toaster

今回こちらの vue-toaster というプラグインになります。

見た目はこんな感じでシンプルにメッセージを表示できたりします。Vue3 にも問題なく対応しています。

実装は非常に簡単ですが一応紹介していきます。

インストール

npm か yarn かそれぞれ自分の使っているものに応じてインストールしてください。

# yarn
yarn add @meforma/vue-toaster

# npm
npm install @meforma/vue-toaster

Import

main.js で以下の様にインポートしておきます。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import Toaster from '@meforma/vue-toaster';

createApp(App)
.use(store)
.use(router)
.use(Toaster)
.mount('#app')

使い方

細かいパラメータは先ほどの git hub の方を見れば書いてありますが、この様に表示場所や表示される長さ、表示する種類( success, info, warning, error, default) などを指定できます。

      this.$toast.show("ログインに失敗しました。", {
        type: "error",
        position: "top-right",
        duration: 8000
        }) 

様々なバリエーションがあるためデザインに応じて使い分けれられるかと思います。

今回もVue3 で使えるプラグインの紹介でした。。。

参考書籍

Vue3 を本で勉強したい方はこちらを参考にしてください。 ３ になるとまだあまり種類は出ていない様です。

その他基礎から体系的に勉強したい方はこちらも。