プラグイン
Nuxtには、Vueプラグインやその他をVueアプリケーションの作成時に使用するためのプラグインシステムがあります。
Nuxtは自動的にapp/plugins/
ディレクトリ内のファイルを読み取り、Vueアプリケーションの作成時にロードします。
内部のすべてのプラグインは自動登録されるため、nuxt.config
に個別に追加する必要はありません。
ファイル名に.server
または.client
サフィックスを使用することで、プラグインをサーバーまたはクライアント側のみにロードすることができます。
登録されたプラグイン
ディレクトリのトップレベルのファイル(またはサブディレクトリ内のインデックスファイル)のみがプラグインとして自動登録されます。
-| plugins/
---| foo.ts // スキャンされる
---| bar/
-----| baz.ts // スキャンされない
-----| foz.vue // スキャンされない
-----| index.ts // 現在スキャンされるが非推奨
foo.ts
とbar/index.ts
のみが登録されます。
サブディレクトリにプラグインを追加するには、nuxt.config.ts
のapp/plugins
オプションを使用できます:
export default defineNuxtConfig({
plugins: [
'~/plugins/bar/baz',
'~/plugins/bar/foz'
]
})
プラグインの作成
プラグインに渡される唯一の引数はnuxtApp
です。
export default defineNuxtPlugin(nuxtApp => {
// nuxtAppを使用して何かを行う
})
オブジェクト構文プラグイン
より高度なユースケースのために、オブジェクト構文を使用してプラグインを定義することも可能です。例えば:
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は次のプラグインをロードする前にプラグインの実行が終了するのを待ちません。
export default defineNuxtPlugin({
name: 'my-plugin',
parallel: true,
async setup (nuxtApp) {
// 次のプラグインは即座に実行されます
}
})
依存関係のあるプラグイン
プラグインが実行される前に他のプラグインを待つ必要がある場合、dependsOn
配列にプラグインの名前を追加できます。
export default defineNuxtPlugin({
name: 'depends-on-my-plugin',
dependsOn: ['my-plugin'],
async setup (nuxtApp) {
// このプラグインは`my-plugin`の実行が終了するのを待ってから実行されます
}
})
コンポーザブルの使用
Nuxtプラグイン内でコンポーザブルやユーティリティを使用できます:
export default defineNuxtPlugin((nuxtApp) => {
const foo = useFoo()
})
ただし、いくつかの制限や違いがあることを覚えておいてください:
コンポーザブルが後で登録される別のプラグインに依存している場合、動作しない可能性があります。 :br
プラグインは順次、他のすべてのものの前に呼び出されます。まだ呼び出されていない別のプラグインに依存するコンポーザブルを使用する可能性があります。
コンポーザブルがVue.jsのライフサイクルに依存している場合、動作しません。 :br
通常、Vue.jsのコンポーザブルは現在のコンポーネントインスタンスにバインドされていますが、プラグインはnuxtApp
インスタンスにのみバインドされています。
ヘルパーの提供
NuxtApp
インスタンスにヘルパーを提供したい場合、プラグインからprovide
キーの下でそれを返します。
※このページは Nuxt.js 公式ドキュメントの翻訳ページ(非公式)です。
公式ドキュメントの該当ページはこちら:
https://nuxt.com/docs/4.x/guide/directory-structure/app/plugins