Nuxt2からNuxt3へのバージョンアップ時のnuxtApp.$onとnuxtApp.$offの変更【備忘録】

今回はNuxt2からNuxt3へのバージョンアップ時にNuxt2で使っていたnuxtApp.$onとnuxtApp.$offはどう変更していけば良いのかについてご紹介していきます。

個人の備忘録の意味合いが強いです。

バージョンアップ後のNuxt.jsのバージョンは3.11.2となります。



Nuxt2からNuxt3へのバージョンアップ時のnuxtApp.$onとnuxtApp.$offの変更【備忘録】

Nuxt2では$nuxt.emit()でグローバルなVueオブジェクトに対しイベントを発火し、$nuxt.on()でイベントハンドラを登録し、$nuxt.off()で登録したイベントハンドラを解除するという方法があると思います。

・parent.vue

・child.vue

これをこのままNuxt3にバージョンアップしてしまうと、Nuxt3では$nuxt.on()と$nuxt.off()に対応していないため動きません。

やり方としては、$nuxt.on()や$nuxt.off()の代わりにnuxtApp.hookやnuxtApp.provideを使いましょう。

・child.vue(変更後)

終わりに

今回はNuxt2からNuxt3へのバージョンアップ時にNuxt2で使っていたnuxtApp.$onとnuxtApp.$offはどう変更していけば良いのかについてご紹介いたしました。

最後までお読みいただきありがとうございます。
よろしければブログやTwitterでのシェアをお願いしております。
コメントもお待ちしております。
誤植や勘違いなどございましたらコメント欄にて教えていただけると幸いです。

直接契約ができるフリーランスエージェント「エンハンス」を立ち上げました。
詳しくは下記LPをご参照ください。
https://enhance.decryption.co.jp/

Youtubeチャンネル開設いたしました。
チャンネル登録者10,000人を目指しているので、良いと思った方はチャンネル登録をお願いしたいです。
https://www.youtube.com/channel/UC219XhmSRxmXltTy6COxSMw






Nuxt.js

Posted by ちこ