外掛

Nuxt Kit 提供了一套實用工具，幫助您建立和使用外掛。您可以使用這些函式將外掛或外掛模板新增到您的模組中。

外掛是自包含的程式碼，通常向 Vue 新增應用層功能。在 Nuxt 中，外掛會自動從 app/plugins/ 目錄匯入。但是，如果您需要隨模組一起釋出外掛，Nuxt Kit 提供了 addPlugin 和 addPluginTemplate 方法。這些實用工具允許您自定義外掛配置以更好地滿足您的需求。

`addPlugin`

註冊一個 Nuxt 外掛並將其新增到外掛陣列中。

觀看 Vue School 關於 addPlugin 的影片。

使用

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`	`string`	`true`	外掛檔案的路徑。
`模式`	`'all' \| 'server' \| 'client'`	`false`	如果設定為 `'all'`，外掛將包含在客戶端和伺服器包中。如果設定為 `'server'`，外掛將僅包含在伺服器包中。如果設定為 `'client'`，外掛將僅包含在客戶端包中。在指定 `src` 選項時，您還可以使用 `.client` 和 `.server` 修飾符，以便僅在客戶端或伺服器端使用外掛。
`order`	`number`	`false`	外掛的順序。這允許更細粒度地控制外掛順序，並且只應由高階使用者使用。較低的數字優先執行，使用者外掛預設為 `0`。建議將 `order` 設定為 `-20`（對於 `pre`-plugins，即在 Nuxt 外掛之前執行的外掛）和 `20`（對於 `post`-plugins，即在 Nuxt 外掛之後執行的外掛）之間的數字。

除非必要，否則避免使用 order。如果您只需要在 Nuxt 預設設定之後註冊外掛，請使用 append。

options：可選物件，具有以下屬性

屬性	型別	必需	描述
`append`	`boolean`	`false`	如果為 `true`，外掛將附加到外掛陣列。如果為 `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',
    })
  },
})

export default defineNuxtPlugin((nuxtApp) => {
  const colorMode = useColorMode()

  nuxtApp.hook('app:mounted', () => {
    if (colorMode.preference !== 'dark') {
      colorMode.preference = 'dark'
    }
  })
})

`addPluginTemplate`

新增一個模板並註冊為 Nuxt 外掛。這對於需要在構建時生成程式碼的外掛非常有用。

觀看 Vue School 關於 addPluginTemplate 的影片。

使用

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`	`string`	`false`	模板路徑。如果未提供 `src`，則必須提供 `getContents`。
`filename`	`string`	`false`	模板檔名。如果未提供 `filename`，它將從 `src` 路徑生成。在這種情況下，`src` 選項是必需的。
`dst`	`string`	`false`	目標檔案路徑。如果未提供 `dst`，它將從 `filename` 路徑和 nuxt `buildDir` 選項生成。
`模式`	`'all' \| 'server' \| 'client'`	`false`	如果設定為 `'all'`，外掛將包含在客戶端和伺服器包中。如果設定為 `'server'`，外掛將僅包含在伺服器包中。如果設定為 `'client'`，外掛將僅包含在客戶端包中。在指定 `src` 選項時，您還可以使用 `.client` 和 `.server` 修飾符，以便僅在客戶端或伺服器端使用外掛。
`options`	`Record<string, any>`	`false`	要傳遞給模板的選項。
`getContents`	`(data: Record<string, any>) => string \| Promise<string>`	`false`	一個將使用 `options` 物件呼叫的函式。它應該返回一個字串或解析為字串的 Promise。如果提供了 `src`，此函式將被忽略。
`write`	`boolean`	`false`	如果設定為 `true`，模板將寫入目標檔案。否則，模板將僅在虛擬檔案系統中使用。
`order`	`number`	`false`	外掛的順序。這允許更細粒度地控制外掛順序，並且只應由高階使用者使用。較低的數字優先執行，使用者外掛預設為 `0`。建議將 `order` 設定為 `-20`（對於 `pre`-plugins，即在 Nuxt 外掛之前執行的外掛）和 `20`（對於 `post`-plugins，即在 Nuxt 外掛之後執行的外掛）之間的數字。

建議使用 getContents 進行動態外掛生成。除非必要，否則避免設定 order。

options：可選物件，具有以下屬性

屬性	型別	必需	描述
`append`	`boolean`	`false`	如果為 `true`，外掛將附加到外掛陣列。如果為 `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',
    },
  },
})

import { defineNuxtPlugin } from '#app/nuxt'

export default defineNuxtPlugin({
  name: 'nuxt:vue-app-config',
  enforce: 'pre',
  setup (nuxtApp) {
    nuxtApp.vueApp.config.idPrefix = 'nuxt'
  },
})

這有幫助嗎？

報告問題或在 GitHub 上編輯此頁面

佈局

Nuxt Kit 提供了一套實用工具，幫助您使用佈局。

生命週期鉤子

Nuxt 提供了一個強大的鉤子系統，可以使用鉤子擴充套件幾乎所有方面。