プラグイン

Nuxt Kit はプラグインの作成と使用を支援する一連のユーティリティを提供します。これらの関数を使用して、モジュールにプラグインやプラグインテンプレートを追加できます。

プラグインは通常、Vueにアプリレベルの機能を追加する自己完結型のコードです。Nuxtでは、プラグインは自動的に app/plugins/ ディレクトリからインポートされます。ただし、モジュールと共にプラグインを提供する必要がある場合、Nuxt Kit は addPlugin と addPluginTemplate メソッドを提供します。これらのユーティリティを使用すると、プラグインの設定をカスタマイズしてニーズにより適合させることができます。

`addPlugin`

Nuxtプラグインを登録し、プラグイン配列に追加します。

addPlugin に関する Vue School のビデオを視聴してください。

使用法

import { addPlugin, createResolver, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    const { resolve } = createResolver(import.meta.url)

    addPlugin({
      src: resolve('runtime/plugin.js'),
      mode: 'client',
    })
  },
})

型

function addPlugin(plugin: NuxtPlugin | string, options?: AddPluginOptions): NuxtPlugin

パラメータ

plugin: プラグインオブジェクトまたはプラグインへのパスを含む文字列。文字列が提供された場合、それは src がその文字列値に設定されたプラグインオブジェクトに変換されます。

プラグインオブジェクトが提供された場合、以下のプロパティを持つ必要があります：

プロパティ	型	必須	説明
`src`	`string`	`true`	プラグインファイルへのパス。
`mode`	`'all' \| 'server' \| 'client'{lang="ts"}`	`false`	`'all'` に設定すると、プラグインはクライアントとサーバーの両方のバンドルに含まれます。 `'server'` に設定すると、プラグインはサーバーバンドルにのみ含まれます。 `'client'` に設定すると、プラグインはクライアントバンドルにのみ含まれます。`src` オプションを指定する際に `.client` および `.server` 修飾子を使用して、プラグインをクライアントまたはサーバー側でのみ使用することもできます。
`order`	`number`	`false`	プラグインの順序。このプロパティはプラグインの順序をより詳細に制御するためのもので、上級ユーザーのみが使用するべきです。小さい数値が先に実行され、ユーザープラグインはデフォルトで `0` です。`order` を `-20` から `20` の間の数値に設定することをお勧めします。`-20` は Nuxt プラグインの前に実行される `pre` プラグイン、`20` は Nuxt プラグインの後に実行される `post` プラグインです。

必要でない限り order の使用は避けてください。Nuxt のデフォルトの後にプラグインを登録する必要がある場合は append を使用してください。

options: 以下のプロパティを持つオプションのオブジェクト：

プロパティ	型	必須	説明
`append`	`boolean`	`false`	`true` の場合、プラグインはプラグイン配列の末尾に追加されます。`false` の場合、先頭に追加されます。デフォルトは `false` です。

例

import { addPlugin, createResolver, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    const { resolve } = createResolver(import.meta.url)

    addPlugin({
      src: resolve('runtime/plugin.js'),
      mode: 'client',
    })
  },
})

`addPluginTemplate`

テンプレートを追加し、Nuxtプラグインとして登録します。これは、ビルド時にコードを生成する必要があるプラグインに便利です。

addPluginTemplate に関する Vue School のビデオを視聴してください。

使用法

import { addPluginTemplate, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options) {
    addPluginTemplate({
      filename: 'module-plugin.mjs',
      getContents: () => `import { defineNuxtPlugin } from '#app/nuxt'
export default defineNuxtPlugin({
  name: 'module-plugin',
  setup (nuxtApp) {
    ${options.log ? 'console.log("Plugin install")' : ''}
  }
})`,
    })
  },
})

型

function addPluginTemplate(pluginOptions: NuxtPluginTemplate, options?: AddPluginOptions): NuxtPlugin

パラメータ

pluginOptions: 以下のプロパティを持つプラグインテンプレートオブジェクト：

プロパティ	型	必須	説明
`src`	`string`	`false`	テンプレートへのパス。`src` が提供されない場合、代わりに `getContents` を提供する必要があります。
`filename`	`string`	`false`	テンプレートのファイル名。`filename` が提供されない場合、`src` パスから生成されます。この場合、`src` オプションが必要です。
`dst`	`string`	`false`	出力ファイルへのパス。`dst` が提供されない場合、`filename` パスと nuxt `buildDir` オプションから生成されます。
`mode`	`'all' \| 'server' \| 'client'{lang="ts"}`	`false`	`'all'` に設定すると、プラグインはクライアントとサーバーの両方のバンドルに含まれます。 `'server'` に設定すると、プラグインはサーバーバンドルにのみ含まれます。 `'client'` に設定すると、プラグインはクライアントバンドルにのみ含まれます。`src` オプションを指定する際に `.client` および `.server` 修飾子を使用して、プラグインをクライアントまたはサーバー側でのみ使用することもできます。
`options`	`Record<string, any>{lang="ts"}`	`false`	テンプレートに渡すオプション。
`getContents`	`(data: Record<string, any>) => string \| Promise<string>{lang="ts"}`	`false`	`options` オブジェクトと共に呼び出される関数。文字列または文字列に解決されるプロミスを返す必要があります。`src` が提供されている場合、この関数は無視されます。
`write`	`boolean`	`false`	`true` に設定すると、テンプレートは出力ファイルに書き込まれます。それ以外の場合、テンプレートは仮想ファイルシステムでのみ使用されます。
`order`	`number`	`false`	プラグインの順序。このプロパティはプラグインの順序をより詳細に制御するためのもので、上級ユーザーのみが使用するべきです。小さい数値が先に実行され、ユーザープラグインはデフォルトで `0` です。`order` を `-20` から `20` の間の数値に設定することをお勧めします。`-20` は Nuxt プラグインの前に実行される `pre` プラグイン、`20` は Nuxt プラグインの後に実行される `post` プラグインです。

動的なプラグイン生成には getContents を使用することをお勧めします。必要でない限り order の設定は避けてください。

options: 以下のプロパティを持つオプションのオブジェクト：

プロパティ	型	必須	説明
`append`	`boolean`	`false`	`true` の場合、プラグインはプラグイン配列の末尾に追加されます。`false` の場合、先頭に追加されます。デフォルトは `false` です。

例

異なるオプションでプラグインテンプレートを生成する

ビルド時にプラグインコードを動的に生成する必要がある場合は addPluginTemplate を使用します。これにより、渡されたオプションに基づいて異なるプラグイン内容を生成できます。例えば、Nuxt は内部的にこの関数を使用して Vue アプリの設定を生成します。

module.ts

import { addPluginTemplate, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup (_, nuxt) {
    if (nuxt.options.vue.config && Object.values(nuxt.options.vue.config).some(v => v !== null && v !== undefined)) {
      addPluginTemplate({
        filename: 'vue-app-config.mjs',
        write: true,
        getContents: () => `import { defineNuxtPlugin } from '#app/nuxt'
export default defineNuxtPlugin({
  name: 'nuxt:vue-app-config',
  enforce: 'pre',
  setup (nuxtApp) {
    ${Object.keys(nuxt.options.vue.config!)
        .map(k => `nuxtApp.vueApp.config[${JSON.stringify(k)}] = ${JSON.stringify(nuxt.options.vue.config![k as 'idPrefix'])}`)
        .join('\n')
    }
  }
})`,
      })
    }
  },
})

これは、提供された設定に応じて異なるプラグインコードを生成します。

::code-group

nuxt.config.ts

export default defineNuxtConfig({
  vue: {
    config: {
      idPrefix: 'nuxt',
    },
  },
})

#build/vue-app-config.mjs

import { defineNuxtPlugin } from '#app/nuxt'
export default defineNuxtPlugin({
  name: 'nuxt:vue-app-config',
  enforce: 'pre',
  setup (nuxtApp) {
    nuxtApp.vueApp.config["idPrefix"] = "nuxt"
  }
})

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

公式ドキュメントの該当ページはこちら：
https://nuxt.com/docs/4.x/api/kit/plugins