外掛程式

外掛程式是自我包含的程式碼，通常會將應用程式層級的功能新增至 Vue。在 Nuxt 中，外掛程式會從 plugins 目錄自動匯入。但是，如果您需要將外掛程式與您的模組一起發佈，Nuxt Kit 提供了 addPlugin 和 addPluginTemplate 方法。這些實用工具可讓您自訂外掛程式組態，以更符合您的需求。

addPlugin

將 Nuxt 外掛程式註冊到 plugins 陣列中。

類型

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 設定為 -20（用於 pre-外掛程式，即在 Nuxt 外掛程式之前執行的外掛程式）和 20（用於 post-外掛程式，即在 Nuxt 外掛程式之後執行的外掛程式）之間的數字。

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 設定為 -20（用於 pre-外掛程式，即在 Nuxt 外掛程式之前執行的外掛程式）和 20（用於 post-外掛程式，即在 Nuxt 外掛程式之後執行的外掛程式）之間的數字。

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,
      },
    })
  }
})