v3.16
Nuxt on GitHub

模块

源代码
Nuxt Kit 提供了一组工具，帮助你创建和使用模块。你可以使用这些工具来创建自己的模块或复用现有的模块。

模块是 Nuxt 的构建基石。Kit 提供了一组工具，帮助你创建和使用模块。你可以使用这些工具来创建自己的模块或复用现有的模块。例如，你可以使用 defineNuxtModule 函数定义一个模块，并使用 installModule 函数以编程方式安装模块。

defineNuxtModule

定义一个 Nuxt 模块，自动将默认值与用户提供的选项合并，安装提供的任何钩子，并调用可选的 setup 函数以实现完全控制。

类型

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('我的模块已准备好，当前测试选项为：', 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) {
    // 将安装 @nuxtjs/fontaine，配置 Roboto 字体和 Impact 回退
    await installModule('@nuxtjs/fontaine', {
      // 模块配置
      fonts: [
        {
          family: 'Roboto',
          fallbacks: ['Impact'],
          fallbackName: 'fallback-a',
        }
      ]
    })
  }
})