nuxt logo

ドキュメント翻訳(非公式)

プラグイン

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

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

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

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

登録されたプラグイン

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

ディレクトリ構造
-| plugins/
---| foo.ts      // スキャンされる
---| bar/
-----| baz.ts    // スキャンされない
-----| foz.vue   // スキャンされない
-----| index.ts  // 現在スキャンされるが非推奨

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

サブディレクトリにプラグインを追加するには、nuxt.config.tsapp/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.ts01.myPlugin.tsによって注入されたものにアクセスできます。

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

「アルファベット順」の番号付けに不慣れな場合、ファイル名は数値としてではなく文字列としてソートされることを覚えておいてください。例えば、10.myPlugin.ts2.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プラグイン内でコンポーザブルユーティリティを使用できます:

app/plugins/hello.ts
export default defineNuxtPlugin((nuxtApp) => {
  const foo = useFoo()
})

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

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

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

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

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

ヘルパーの提供

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