シェアする

  • このエントリーをはてなブックマークに追加





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

シェアする

  • このエントリーをはてなブックマークに追加
  • 0

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。

それでは!!!

ブログランキング・にほんブログ村へ
にほんブログ村


人気ブログランキング

シェアする

  • このエントリーをはてなブックマークに追加

フォローはいかがですか?