Nuxt2で自作クラスを登録する方法

Nuxt2では自作クラスをNuxtインスタンスに登録する場合、inject()関数を使用していました。

Nuxt2で自作クラスを追加する方法

// plugins/my-plugin.js

class MyPlugin {
  constructor (context) {
    this.error = context.error
  }

  // 404エラーを返す共通関数
  errorHandler () {
    return this.error({ statusCode: 404, message: 'ページが見つかりません' })
  }
}

export default (context, inject) => {
  inject('my', new MyPlugin(context)
}

Nuxt2で自作クラスを呼び出す方法

// pages/index.vue
this.$my.errorHandler()

Nuxt3に自作クラスを登録する方法

Nuxt3ではprovideを使用し、自作クラスを登録します。

関数内ではuseNuxtApp()やuseRoute()など取得できます。

これにより、Nuxt3の機能をカスタマイズしたオリジナル関数を作成できます。

plugins/my-plugin.ts

export interface MyPluginInterface {
  hoge (): string
}

class MyPlugin implements MyPluginInterface {
  hoge () {
    // この中では、Nuxtインスタンスやルートオブジェクトも取得可能
    console.log(useNuxtApp())
    console.log(useRoute().query)

    return 'hoge'
  }
}

export default defineNuxtPlugin(nuxtApp => {
  return {
    provide: {
      my: new MyPlugin
    }
  }
})

Nuxt3でprovideを呼び出す

自作クラスの呼び出しにはuseNuxtApp()を使用します。

provideに登録したプロパティに$をつけて呼び出すルールとなっています。

また、登録したクラスや関数はどこからでも呼び出し可能です。

pages/index.vue

<script setup lang="ts">
  const { $my } = useNuxtApp()
  console.log($my.hoge())
</script>

console

hoge