外掛程式

外掛程式是獨立的程式碼，通常會為 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 設定為介於 -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,
      },
    })
  }
})