Nuxt 项目实战 - 02：nuxt中的各种Hooks

两个核心上下文

• nuxt: 全局上下文，可获取nuxt.config配置
• nuxtApp：界面共享上下文，有vue实例、运行时钩子、内部状态ssrContext、payload等，可通过useNuxtApp获取（Runtime Core）

生命周期钩子

Nuxt Hook(build Time)

• nuxt.config使用钩子

  //nuxt.config
  export default defineNuxtConfig({
    hooks: {
      'close': () => { }
    }
  })
  

• defineNuxtModule 方式使用钩子

  import { defineNuxtModule } from '@nuxt/kit'
  
  export default defineNuxtModule({
    setup (options, nuxt) {
      nuxt.hook('close', async () => { })
    }
  })
  

App Hooks（Runtime）

• 插件使用钩子

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

Nitro Plugin

• 使用钩子

  //~/server/plugins/test.ts
  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)
    })
  })
  

参考文献

• https://nuxt.com/docs/guide/going-further/internals

更多

最近我开源了一个文章助手artipub，可以帮你一键将markdown发布至多平台，方便大家更好的传播知识和分享你的经验。
官网地址：https://artipub.github.io/artipub/ (提示：国内访问可能有点慢，翻墙就会很快)

帮忙点个star⭐，让更多人知道这个工具，谢谢大家🙏。如果你有兴趣，欢迎加入你的加入，一起完善这个工具。