プラグイン

Nuxtには、Vueプラグインやその他をVueアプリケーションの作成時に使用するためのプラグインシステムがあります。

Nuxtは自動的にplugins/ディレクトリ内のファイルを読み込み、Vueアプリケーションの作成時にロードします。

内部のすべてのプラグインは自動登録されるため、nuxt.configに個別に追加する必要はありません。

ファイル名に.serverまたは.clientサフィックスを使用して、サーバーまたはクライアント側でのみプラグインをロードすることができます。

登録されたプラグイン

ディレクトリのトップレベルのファイル（またはサブディレクトリ内のインデックスファイル）のみがプラグインとして自動登録されます。

ディレクトリ構造

-| plugins/
---| foo.ts      // スキャンされる
---| bar/
-----| baz.ts    // スキャンされない
-----| foz.vue   // スキャンされない
-----| index.ts  // 現在スキャンされるが非推奨

foo.tsとbar/index.tsのみが登録されます。

サブディレクトリにプラグインを追加するには、nuxt.config.tsのpluginsオプションを使用できます：

nuxt.config.ts

export default defineNuxtConfig({
  plugins: [
    '~/plugins/bar/baz',
    '~/plugins/bar/foz'
  ]
})

プラグインの作成

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

plugins/hello.ts

export default defineNuxtPlugin(nuxtApp => {
  // nuxtAppを使用して何かを行う
})

オブジェクト構文プラグイン

より高度なユースケースのために、オブジェクト構文を使用してプラグインを定義することも可能です。例えば：

plugins/hello.ts

export default defineNuxtPlugin({
  name: 'my-plugin',
  enforce: 'pre', // または 'post'
  async setup (nuxtApp) {
    // これは通常の関数型プラグインと同等です
  },
  hooks: {
    // ここで直接Nuxtアプリのランタイムフックを登録できます
    'app:created'() {
      const nuxtApp = useNuxtApp()
      // フック内で何かを行う
    }
  },
  env: {
    // サーバーのみまたはアイランドコンポーネントをレンダリングする際にプラグインを実行したくない場合、この値を`false`に設定します。
    islands: true
  }
})

オブジェクト構文を使用している場合、プロパティは静的に解析され、より最適化されたビルドを生成します。そのため、実行時にそれらを定義すべきではありません。 :br 例えば、enforce: import.meta.server ? 'pre' : 'post'を設定すると、Nuxtがプラグインのために行う将来の最適化を無効にします。 Nuxtはオブジェクト構文を使用する際にフックリスナーを静的にプリロードし、プラグイン登録の順序を気にせずにフックを定義できるようにします。

登録順序

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

ディレクトリ構造

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

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

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

「アルファベット順」の番号付けに不慣れな場合、ファイル名は数値としてではなく文字列としてソートされることを覚えておいてください。例えば、10.myPlugin.tsは2.myOtherPlugin.tsの前に来ます。このため、例では一桁の数字に0を付けています。

ロード戦略

並列プラグイン

デフォルトでは、Nuxtはプラグインを順次ロードします。プラグインをparallelとして定義すると、Nuxtは次のプラグインのロードをそのプラグインの実行終了まで待ちません。

plugins/my-plugin.ts

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

依存関係のあるプラグイン

プラグインが実行される前に他のプラグインを待つ必要がある場合、dependsOn配列にプラグインの名前を追加できます。

plugins/depending-on-my-plugin.ts

export default defineNuxtPlugin({
  name: 'depends-on-my-plugin',
  dependsOn: ['my-plugin'],
  async setup (nuxtApp) {
    // このプラグインは`my-plugin`の実行終了を待ってから実行されます
  }
})

コンポーザブルの使用

Nuxtプラグイン内でコンポーザブルやユーティルを使用できます：

plugins/hello.ts

export default defineNuxtPlugin((nuxtApp) => {
  const foo = useFoo()
})

ただし、いくつかの制限と違いがあることを覚えておいてください：

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

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

コンポーザブルがVue.jsのライフサイクルに依存している場合、動作しません。 :br

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

ヘルパーの提供

NuxtAppインスタンスでヘルパーを提供したい場合、provideキーの下でプラグインから返します。

※このページは Nuxt.js 公式ドキュメントの翻訳ページです。

公式ドキュメントの該当ページはこちら：
https://nuxt.com/docs/3.x/guide/directory-structure/plugins