生命周期钩子

钩子系统由unjs/hookable提供支持。

Nuxt钩子（构建时）

这些钩子可用于Nuxt模块和构建上下文。

在`nuxt.config`中

nuxt.config

export default defineNuxtConfig({
  hooks: {
    close: () => { }
  }
})

在Nuxt模块中

import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options, nuxt) {
    nuxt.hook('close', async () => { })
  }
})

探索所有可用的Nuxt钩子。

应用程序钩子（运行时）

应用程序钩子主要由Nuxt插件用于挂接渲染生命周期，但也可在Vue组合式中使用。

plugins/test.ts

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('page:start', () => {
    /* 在这里写入你的代码 */
  })
})

探索所有可用的应用程序钩子。

服务器钩子（运行时）

这些钩子可用于服务器插件，用于挂接Nitro的运行时行为。

~/server/plugins/test.ts

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('render:html', (html, { event }) => {
    console.log('render:html', html)
    html.bodyAppend.push('<hr>由自定义插件追加的内容')
  })

  nitroApp.hooks.hook('render:response', (response, { event }) => {
    console.log('render:response', response)
  })
})

了解更多关于可用Nitro生命周期钩子的信息。

附加钩子

您可以通过扩充Nuxt提供的类型来添加附加钩子。这对于模块非常有用。

import { HookResult } from "@nuxt/schema";

declare module '#app' {
  interface RuntimeNuxtHooks {
    'your-nuxt-runtime-hook': () => HookResult
  }
  interface NuxtHooks {
    'your-nuxt-hook': () => HookResult
  }
}

declare module 'nitropack' {
  interface NitroRuntimeHooks {
    'your-nitro-hook': () => void;
  }
}

Nuxt 是如何工作的？

Nuxt 是一个简洁但高度可定制的框架，用于构建 Web 应用程序。

模块作者指南

学习如何创建一个Nuxt模块，以集成、增强或扩展任何Nuxt应用程序。