最終更新日: 2023年08月15日

Plugins Directory

Nuxtは、Vueアプリケーションの作成時に、自動的にpluginsディレクトリ内のファイルを読み込みます。ファイル名に.serverや.clientという接尾辞を使うと、サーバー側またはクライアント側でのみプラグインを読み込むことができます

登録済みのファイル

plugins/ディレクトリのトップレベルにあるファイル（またはサブディレクトリ内のindexファイル）のみがプラグインとして登録されます

例:

  • ts
plugins
 | - myPlugin.ts  // scanned
 | - myOtherPlugin
 | --- supportingFile.ts   // not scanned
 | --- componentToRegister.vue   // not scanned
 | --- index.ts  // currently scanned but deprecated

myPlugin.tsとmyOtherPlugin/index.tsのみが登録されます。プラグインを設定して、スキャンされないファイルを含めることができます。

プラグインの作成

プラグインに渡される唯一の引数は nuxtApp です。

  • ts
export default defineNuxtPlugin(nuxtApp => {
  // nuxtAppを使用した何かの処理
})

オブジェクト構文プラグイン（Object Syntax Plugins）

より高度な使用例として、オブジェクト構文を使用してプラグインを定義することもできます。 例えば：

  • ts
export default defineNuxtPlugin({
  name: 'my-plugin',
  enforce: 'pre', // or 'post'
  async setup (nuxtApp) {
    // これは通常の機能プラグインと同等
  },
  hooks: {
    // ここでは、Nuxtアプリのフックを直接登録できます。
    'app:created'() {
      const nuxtApp = useNuxtApp()
      // 
    }
  }
})

プラグインの登録順序

ファイル名の先頭に「アルファベット」の番号を付けることで、登録の順序を制御することができます。

For example:

  • ts
plugins/
 | - 01.myPlugin.ts
 | - 02.myOtherPlugin.ts

この例では、02.myOtherPlugin.ts は、01.myPlugin.ts によって挿入されたものすべてにアクセスできます。

これは、別のプラグインに依存するプラグインがある場合に便利です。

ローディング

デフォルトでは、Nuxt はプラグインを順番にロードします。 プラグインを並列として定義できるため、Nuxt はプラグインの実行の終了を待たずに次のプラグインをロードできます。

  • ts
export default defineNuxtPlugin({
  name: 'my-plugin',
  parallel: true,
  async setup (nuxtApp) {
    // 次のプラグインはすぐに実行されます
  }
})

プラグイン内でのコンポーザブルの使用

Nuxt プラグイン内でコンポーザブルを使用できます。

  • ts
export default defineNuxtPlugin((NuxtApp) => {
  const foo = useFoo()
})

ただし、いくつかの制限と違いがあることに注意してください。

コンポーザブルが後で登録された別のプラグインに依存している場合、機能しない可能性があります。

理由: プラグインは、他のすべての前に順番に呼び出されます。 まだ呼び出されていない別のプラグインに依存するコンポーザブルを使用する可能性があります。

コンポーザブルが Vue.js ライフサイクルに依存している場合、それは機能しません。

理由: 通常、Vue.js コンポーザブルは現在のコンポーネント インスタンスにバインドされますが、プラグインは nuxtApp インスタンスにのみバインドされます。

ヘルパーの自動提供

NuxtApp インスタンスにヘルパーを提供したい場合は、provide キーを使用してプラグインからヘルパーを返します。例えば：

  • ts
export default defineNuxtPlugin(() => {
  return {
    provide: {
      hello: (msg: string) => `Hello ${msg}!`
    }
  }
})

In another file you can use this:

  • ts
<script setup lang="ts">
    // あるいは、ここで使用することもできます
    const { $hello } = useNuxtApp()
</script>

<template>
  <div>
    {{ $hello('world') }}
  </div>
</template>

Typing Plugins

プラグインからヘルパーを返す場合、ヘルパーは自動的に入力されます。 これらは useNuxtApp() の戻り値とテンプレート内に入力されていることがわかります。

高度な設定

高度な使用方法では、次のように挿入されたプロパティのタイプを宣言できます。

  • ts
declare module '#app' {
  interface NuxtApp {
    $hello (msg: string): string
  }
}

declare module 'vue' {
  interface ComponentCustomProperties {
    $hello (msg: string): string
  }
}

export { }

Vue プラグイン

Google Analyticsタグを追加するvue-gtagなどのVueプラグインを使用したい場合は、Nuxtプラグインを使用してこれを行うことができます。

まず、必要なプラグインをインストールします。

  • ts
yarn add --dev vue-gtag-next

Then create a plugin file plugins/vue-gtag.client.js.

  • ts
import VueGtag, { trackRouter } from 'vue-gtag-next'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueGtag, {
    property: {
      id: 'GA_MEASUREMENT_ID'
    }
  })
  trackRouter(useRouter())
})

Vue ディレクティブ

同様に、カスタム Vue ディレクティブをプラグインに登録できます。 たとえば、plugins/directive.ts では次のようになります。

  • ts
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.directive('focus', {
    mounted (el) {
      el.focus()
    },
    getSSRProps (binding, vnode) {
      // ここでSSR固有のプロパティを指定できます
      return {}
    }
  })
})