プラグイン

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

addPlugin

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

型

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

interface NuxtPlugin {
  src: string
  mode?: 'all' | 'server' | 'client'
  order?: number
}

interface AddPluginOptions { append?: boolean }

パラメータ

plugin

**型**: NuxtPlugin | string

**必須**: true

プラグインオブジェクト、またはプラグインへのパスを含む文字列。文字列が指定された場合、src が文字列値に設定されたプラグインオブジェクトに変換されます。プラグインオブジェクトが指定された場合、次のプロパティが必要です。

• src (必須)
  **型**: string
  プラグインへのパス。
• mode (オプション)
  **型**: 'all' | 'server' | 'client'
  **デフォルト**: 'all'
'all' に設定すると、プラグインはクライアントとサーバーの両方のバンドルに含まれます。'server' に設定すると、プラグインはサーバーバンドルにのみ含まれます。'client' に設定すると、プラグインはクライアントバンドルにのみ含まれます。src オプションを指定するときに .client および .server 修飾子を使用して、クライアント側またはサーバー側でのみプラグインを使用することもできます。
• order (オプション)
  **型**: number
  **デフォルト**: 0
  プラグインの順序。これにより、プラグインの順序をより詳細に制御できます。上級ユーザーのみが使用してください。小さい数字ほど先に実行され、ユーザープラグインはデフォルトで 0 になります。order を pre プラグイン（Nuxt プラグインの前に実行されるプラグイン）の場合は -20 から post プラグイン（Nuxt プラグインの後に実行されるプラグイン）の場合は 20 までの数値に設定することをお勧めします。

options

**型**: AddPluginOptions

**デフォルト**: {}

プラグインに渡すオプション。append が true に設定されている場合、プラグインは先頭に追加されるのではなく、プラグイン配列の末尾に追加されます。

サンプル

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

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

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

addPluginTemplate

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

型

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

interface NuxtPluginTemplate<Options = Record<string, any>> {
  src?: string,
  filename?: string,
  dst?: string,
  mode?: 'all' | 'server' | 'client',
  options?: Options,
  getContents?: (data: Options) => string | Promise<string>,
  write?: boolean,
  order?: number
}

interface AddPluginOptions { append?: boolean }

interface NuxtPlugin {
  src: string
  mode?: 'all' | 'server' | 'client'
  order?: number
}

パラメータ

pluginOptions

**型**: NuxtPluginTemplate

**必須**: true

次のプロパティを持つプラグインテンプレートオブジェクト。

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

options

**型**: AddPluginOptions

**デフォルト**: {}

プラグインに渡すオプション。append が true に設定されている場合、プラグインは先頭に追加されるのではなく、プラグイン配列の末尾に追加されます。

サンプル

// https://github.com/vuejs/vuefire
import { createResolver, defineNuxtModule, addPluginTemplate } from '@nuxt/kit'

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

    addPluginTemplate({
      src: resolve(templatesDir, 'plugin.ejs'),
      filename: 'plugin.mjs',
      options: {
        ...options,
        ssr: nuxt.options.ssr,
      },
    })
  }
})