Nuxt3でinjectみたいに自作クラスを登録するにはprovideを使う
  • 2022.03.20に公開
  • Nuxt3
  • 0. Nuxt3
  • No.8 / 9
現在このカテゴリーは、Nuxt3パブリックベータ版の情報を公開しています。変更の可能性が大きくあるので、最新の情報は Nuxt3の公式サイト をご確認ください。

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
あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる。そんな方に向けた単発・短期間メンターサービスを行っています。
独学プログラマのサービス
独学プログラマ
独学でも、ここまでできるってよ。
CONTACT
Nuxt.js制作のご依頼は下記メールアドレスまでお送りください。