プラグイン

ソース
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文字列trueプラグインファイルへのパス。
モード'all' | 'server' | 'client'false'all'に設定すると、プラグインはクライアントとサーバーの両方のバンドルに含まれます。'server'に設定すると、プラグインはサーバーバンドルのみに含まれます。'client'に設定すると、プラグインはクライアントバンドルのみに含まれます。srcオプションを指定する際に.clientと.server修飾子を使用して、プラグインをクライアント側またはサーバー側でのみ使用することもできます。
ordernumberfalseプラグインの順序。これにより、プラグインの順序をより細かく制御できますが、上級者のみが使用する必要があります。数値が小さいほど先に実行され、ユーザープラグインのデフォルトは0です。preプラグイン（Nuxtプラグインの前に実行されるプラグイン）の場合は-20から、postプラグイン（Nuxtプラグインの後に実行されるプラグイン）の場合は20の間の数値をorderに設定することをお勧めします。
必要な場合を除き、orderの使用は避けてください。Nuxtのデフォルトの後にプラグインを登録するだけでよい場合は、appendを使用してください。

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

プロパティタイプ必須説明
appendブール値falsetrueの場合、プラグインはプラグイン配列の末尾に追加されます。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文字列falseテンプレートへのパス。srcが指定されていない場合は、代わりにgetContentsが指定されている必要があります。
filename文字列falseテンプレートのファイル名。filenameが指定されていない場合、srcパスから生成されます。この場合、srcオプションは必須です。
dst文字列false宛先ファイルへのパス。dstが指定されていない場合、filenameパスとNuxtのbuildDirオプションから生成されます。
モード'all' | 'server' | 'client'false'all'に設定すると、プラグインはクライアントとサーバーの両方のバンドルに含まれます。'server'に設定すると、プラグインはサーバーバンドルのみに含まれます。'client'に設定すると、プラグインはクライアントバンドルのみに含まれます。srcオプションを指定する際に.clientと.server修飾子を使用して、プラグインをクライアント側またはサーバー側でのみ使用することもできます。
optionsRecord<string, any>falseテンプレートに渡すオプション。
getContents(data: Record<string, any>) => string | Promise<string>falseoptionsオブジェクトを引数として呼び出される関数です。文字列、または文字列に解決されるPromiseを返す必要があります。srcが指定されている場合、この関数は無視されます。
writeブール値falsetrueに設定すると、テンプレートは宛先ファイルに書き込まれます。それ以外の場合、テンプレートは仮想ファイルシステムでのみ使用されます。
ordernumberfalseプラグインの順序。これにより、プラグインの順序をより細かく制御できますが、上級者のみが使用する必要があります。数値が小さいほど先に実行され、ユーザープラグインのデフォルトは0です。preプラグイン（Nuxtプラグインの前に実行されるプラグイン）の場合は-20から、postプラグイン（Nuxtプラグインの後に実行されるプラグイン）の場合は20の間の数値をorderに設定することをお勧めします。
動的なプラグイン生成にはgetContentsの使用を推奨します。必要な場合を除き、orderの設定は避けてください。

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

プロパティタイプ必須説明
appendブール値falsetrueの場合、プラグインはプラグイン配列の末尾に追加されます。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')
    }
  }
})`,
      })
    }
  },
})

これにより、指定された設定に応じて異なるプラグインコードが生成されます。

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