Nuxt 3 笔记：Hook 系统

Open cssmagic opened this issue 1 year ago • 0 comments

概述

Nuxt 提供了强大的 hook 系统，通过 hook 来扩展框架的方方面面。

Nuxt 构建时 Hook

这些 hook 对 Nuxt 模块和构建上下文开放。

在 nuxt.config 中使用：

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

在 Nuxt 模块中使用：

import { defineNuxtModule } from '@nuxt/kit'

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

Nuxt 运行时 Hook

可在 Nuxt 插件中使用，用于 hook 进渲染的生命周期。也可在 Vue 组合式函数中使用。

在插件中使用：

export default defineNuxtPlugin((nuxtApp) => {
	nuxtApp.hook('page:start', () => {
		/* your code goes here */
	})
})

Nitro 运行时 Hook

可以在 Nitro 插件中使用，用于 hook 进 Nitro 的运行时行为。

// @/server/plugin/test.js
export default defineNitroPlugin((nitroApp) => {
	nitroApp.hooks.hook('render:html', (html, { event }) => {
		console.log('render:html', html)
		html.bodyAppend.push('<hr>Appended by custom plugin')
	})

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