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

addPlugin

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

使用法

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 が文字列値に設定されたプラグインオブジェクトに変換されます。

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

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

例

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 プラグインとして登録します。これは、ビルド時にコードを生成する必要があるプラグインに便利です。

使用法

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: 以下のプロパティを持つプラグインテンプレートオブジェクト：

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

例

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

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

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

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

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

::

EJS テンプレートを使用してプラグインを生成する

EJS テンプレートを使用してプラグインを生成することもできます。オプションは options プロパティを通じて渡され、その後 EJS テンプレート内で使用してプラグインの内容を生成します。

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

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

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