defineNuxtPlugin

原始檔
defineNuxtPlugin() 是一個用於建立 Nuxt 外掛的輔助函式。

defineNuxtPlugin 是一個輔助函式，用於建立具有增強功能和型別安全的 Nuxt 外掛。此工具將不同的外掛格式規範化為一致的結構，使其在 Nuxt 的外掛系統中無縫工作。

plugins/hello.ts
export default defineNuxtPlugin((nuxtApp) => {
  // Doing something with nuxtApp
})
在文件 > 4 X > 指南 > 目錄結構 > App > Plugins#建立外掛中閱讀更多內容。

型別

簽名
export function defineNuxtPlugin<T extends Record<string, unknown>> (plugin: Plugin<T> | ObjectPlugin<T>): Plugin<T> & ObjectPlugin<T>

type Plugin<T> = (nuxt: NuxtApp) => Promise<void> | Promise<{ provide?: T }> | void | { provide?: T }

interface ObjectPlugin<T> {
  name?: string
  enforce?: 'pre' | 'default' | 'post'
  dependsOn?: string[]
  order?: number
  parallel?: boolean
  setup?: Plugin<T>
  hooks?: Partial<RuntimeNuxtHooks>
  env?: {
    islands?: boolean
  }
}

引數

外掛：外掛可以透過兩種方式定義

  1. 函式外掛：一個接收 NuxtApp 例項的函式，並且如果要在 NuxtApp 例項上提供輔助函式，則可以返回一個帶有潛在 provide 屬性的物件。
  2. 物件外掛：一個可以包含各種屬性來配置外掛行為的物件，例如 name、enforce、dependsOn、order、parallel、setup、hooks 和 env。
屬性型別必需描述
namestringfalse外掛的可選名稱，用於除錯和依賴管理。
enforce'pre' | 'default' | 'post'false控制外掛相對於其他外掛何時執行。
dependsOnstring[]false此外掛依賴的外掛名稱陣列。確保正確的執行順序。
ordernumberfalse這允許對外掛順序進行更精細的控制，並且只能由高階使用者使用。它會覆蓋 enforce 的值，並用於對外掛進行排序。
parallelbooleanfalse是否與其他並行外掛並行執行外掛。
setupPlugin<T>false主外掛函式，相當於函式外掛。
hooksPartial<RuntimeNuxtHooks>false直接註冊 Nuxt 應用執行時鉤子。
env{ islands?: boolean }false如果您不希望外掛在渲染僅伺服器或島嶼元件時執行，請將此值設定為 false。

示例

基本用法

以下示例演示了一個新增全域性功能的簡單外掛

plugins/hello.ts
export default defineNuxtPlugin((nuxtApp) => {
  // Add a global method
  return {
    provide: {
      hello: (name: string) => `Hello ${name}!`,
    },
  }
})

物件語法外掛

以下示例顯示了具有高階配置的物件語法

plugins/advanced.ts
export default defineNuxtPlugin({
  name: 'my-plugin',
  enforce: 'pre',
  async setup (nuxtApp) {
    // Plugin setup logic
    const data = await $fetch('/api/config')

    return {
      provide: {
        config: data,
      },
    }
  },
  hooks: {
    'app:created' () {
      console.log('App created!')
    },
  },
})