【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);

// main.js

import { createApp } from "vue";

import VueSimpleAlert from "vue3-simple-alert";

const app = createApp({})

app.use(VueSimpleAlert);

このあと、

this.$alert('message');

1	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;
}

// 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

1 2	php composer dump-autoload php artisan cache:clear

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

それでは！！！

にほんブログ村

人気ブログランキング

たーちゃん

20代前半までは東京で音楽をやりながら両手の指以上の業種でアルバイト生活をしていましたが、某大手プロバイダのテレアポのバイトでPCの知識の無さに愕然とし、コンピュータをもっと知りたい！と思ったことをきっかけに25歳の時にITの世界に未経験で飛び込みました。
紆余曲折を経て、現在は個人事業主としてお仕事させていただいており、10年ほどになります。
web制作から企業システム構築、ツール開発など、フロントエンドもバックエンドもサーバーもDBAも依頼があれば何でもやってきた雑食系エンジニアです。

今風にいうとフルスタックエンジニアということになるのかしら？？

→ 詳細プロフィールというか、生い立ちはこちら

→スキルシートをご覧になる場合はこちら

→お仕事のご依頼やお見積りなどお問い合わせはこちらから！