【Vue3】vue-toaster を Composition API で使う

2021年5月23日2021年5月28日

以前下記の記事でトーストを表示する vue-toaster というライブラリを紹介しましたがせっかく Vue3 という事で今回は Composition API で使用します。

【Vue3】で Toast 表示

main.js

main.js の主に vue-toaster に関連する部分を抜粋しています。

import Toaster from '@meforma/vue-toaster'

const app = createApp(App)

app.use(Toaster).provide('toast', app.config.globalProperties.$toast) 

setup()

従来の Options API では this.$toast で参照していましたが setup 内では this は使用できないため下記の様に main.js の方で provide した toast を inject して使用する形になります。

setup() {
    const toast = inject('toast');

    toast.show("エラーtoast"), {
	type: "error",
	position: "top-left",
        duration: 8000
     })

}

まとめ

今回 provide-inject によって Composition API で以前紹介した vue-toaster を使用しました。provide-inject について詳しくはこちらの記事などで分かりやすく説明されています。

Vue3 対応していても Composition API にての使用方法など記載されていない場合もあるかと思いますがこの様な形で setup 内で使うことができるかもしれません。

参考書籍

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

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