【vue】vue3でvue-simple-alertが使えない？

vue3を使用してサイトを構築していたときに、

サクッとalert出したいなぁとなりました。

 

 

そこで探してみたところ、

vue-simple-alertなるものがあることがわかりました。

 

早速使おうとしたところ、

結構ワナが潜んでいたので備忘。

 

 

 

そもそもこれまでライブラリはvue3に対応してない！

npmでインストールできるみたいなので、

やってみるとvueのversionが合わないよということでエラーになってしまいました。

 

 

更に調査をすすめると、vue3対応したvue3-simple-alertというものが

あるみたい。

こっちを使わないとダメ。

 

 

READMEにあるようにやってみても。。。

npmインストールは無事完了。

READMEに使い方が書いてあったのでそのとおりに書いてみる。

// main.js
import { createApp } from "vue";
import VueSimpleAlert from "vue3-simple-alert";

const app = createApp({})

app.use(VueSimpleAlert);

 

このあと、

this.$alert('message');

 

で使えるってことだったので使ってみても、

function not foundで実行できず。

 

 

ライブラリの実装見たらバグがあるみたい。

おかしいなぁということで、実装を確認してみる。

そうすると、installメソッドの中で$alertに割り当てる処理の書き方が

vue3的によろしくないみたい。

 

// node_modules/vue3-simple-alert/lib/index.js
if (!Vue.hasOwnProperty("$alert")) {
    //Vue.$alert = VueSimpleAlert.alert; ↓ のようにする
    Vue.config.globalProperties.$alert = VueSimpleAlert.alert;
}

 

なので、↑のように手入れすることに。

修正後には、

php composer dump-autoload
php artisan cache:clear

 

を忘れずに実行すればOK。

 

 

それでは！！！

 

 

にほんブログ村

人気ブログランキング