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

2024年9月18日

今回は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

<script>
export default {
  methods: {
    test() {
      this.$nuxt.$emit('updateStatus', currentStatus)
    },
   }
  }
}
</script>

export default {

methods: {

test() {

this.$nuxt.$emit('updateStatus', currentStatus)

}

</script>

・child.vue

<script>
export default {
  mounted() {
    setTimeout(async () => {
      this.$nuxt.$on('updateStatus', this.setStatus)
  },
  beforeDestroy() {
    this.$nuxt.$off('updateStatus')
  },
  methods: {
    setStatus(status) {
      this.status = status
    }
  }
}
</script>

export default {

mounted() {

setTimeout(async () => {

this.$nuxt.$on('updateStatus', this.setStatus)

beforeDestroy() {

this.$nuxt.$off('updateStatus')

methods: {

setStatus(status) {

this.status = status

}

</script>

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

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

・child.vue(変更後)

<script>
import { useNuxtApp } from '#app';
const nuxtApp = useNuxtApp();
export default {
  mounted() {
    setTimeout(async () => {
      nuxtApp.provide('updateStatus', this.setStatus)
  },
  beforeDestroy() {
    nuxtApp.provide('updateStatus', null)
  },
  methods: {
    setStatus(status) {
      this.status = status
    }
  }
}
</script>