模組
Nuxt Kit 提供一組實用工具，幫助您建立和使用模組。您可以使用這些工具來建立您自己的模組或重複使用現有的模組。
模組是 Nuxt 的建構區塊。 Kit 提供一組實用工具，幫助您建立和使用模組。您可以使用這些工具來建立您自己的模組或重複使用現有的模組。例如，您可以使用 defineNuxtModule 函式來定義模組，並使用 installModule 函式以程式化的方式安裝模組。
defineNuxtModule
定義一個 Nuxt 模組，自動將預設值與使用者提供的選項合併、安裝任何提供的鉤子，並呼叫一個可選的設定函式以進行完全控制。
類型
function defineNuxtModule<OptionsT extends ModuleOptions> (definition: ModuleDefinition<OptionsT> | NuxtModule<OptionsT>): NuxtModule<OptionsT>
type ModuleOptions = Record<string, any>
interface ModuleDefinition<T extends ModuleOptions = ModuleOptions> {
meta?: ModuleMeta
defaults?: T | ((nuxt: Nuxt) => T)
schema?: T
hooks?: Partial<NuxtHooks>
setup?: (this: void, resolvedOptions: T, nuxt: Nuxt) => Awaitable<void | false | ModuleSetupReturn>
}
interface NuxtModule<T extends ModuleOptions = ModuleOptions> {
(this: void, inlineOptions: T, nuxt: Nuxt): Awaitable<void | false | ModuleSetupReturn>
getOptions?: (inlineOptions?: T, nuxt?: Nuxt) => Promise<T>
getMeta?: () => Promise<ModuleMeta>
}
interface ModuleSetupReturn {
timings?: {
setup?: number
[key: string]: number | undefined
}
}
interface ModuleMeta {
name?: string
version?: string
configKey?: string
compatibility?: NuxtCompatibility
[key: string]: unknown
}
參數
definition
類型：ModuleDefinition<T> | NuxtModule<T>
必要：true
模組定義物件或模組函式。
meta（選填）
類型：ModuleMeta
模組的元數據。它定義模組名稱、版本、配置鍵和相容性。defaults（選填）
類型：T | ((nuxt: Nuxt) => T)
模組的預設選項。如果提供了函式，它將以 Nuxt 實例作為第一個參數呼叫。schema（選填）
類型：T
模組選項的架構。如果提供，選項將應用於架構。hooks（選填）
類型：Partial<NuxtHooks>
要為模組安裝的鉤子。如果提供，模組將安裝這些鉤子。setup（選填）
類型：(this: void, resolvedOptions: T, nuxt: Nuxt) => Awaitable<void | false | ModuleSetupReturn>
模組的設定函式。如果提供，模組將呼叫設定函式。
範例
// https://github.com/nuxt/starter/tree/module
import { defineNuxtModule } from '@nuxt/kit'
export default defineNuxtModule({
meta: {
name: 'my-module',
configKey: 'myModule'
},
defaults: {
test: 123
},
setup (options, nuxt) {
nuxt.hook('modules:done', () => {
console.log('My module is ready with current test option: ', options.test)
})
}
})
installModule
以程式化的方式安裝指定的 Nuxt 模組。當您的模組依賴於其他模組時，這會很有幫助。您可以將模組選項作為物件傳遞給 inlineOptions，它們將被傳遞到模組的 setup 函式。
類型
async function installModule (moduleToInstall: string | NuxtModule, inlineOptions?: any, nuxt?: Nuxt)
參數
moduleToInstall
類型：string | NuxtModule
必要：true
要安裝的模組。可以是帶有模組名稱的字串，也可以是模組物件本身。
inlineOptions
類型：any
預設值：{}
帶有要傳遞到模組 setup 函式的模組選項的物件。
nuxt
類型：Nuxt
預設值：useNuxt()
Nuxt 實例。如果未提供，它將透過呼叫 useNuxt() 從上下文中檢索。
範例
import { defineNuxtModule, installModule } from '@nuxt/kit'
export default defineNuxtModule({
async setup (options, nuxt) {
// will install @nuxtjs/fontaine with Roboto font and Impact fallback
await installModule('@nuxtjs/fontaine', {
// module configuration
fonts: [
{
family: 'Roboto',
fallbacks: ['Impact'],
fallbackName: 'fallback-a',
}
]
})
}
})