Skip to content

Nuxt 入门实战 - 02:nuxt中的各种Hooks

两个核心上下文

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

生命周期钩子

Nuxt Hook(build Time)

  • nuxt.config使用钩子

    jsx
    //nuxt.config
    export default defineNuxtConfig({
      hooks: {
        'close': () => { }
      }
    })
  • defineNuxtModule 方式使用钩子

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

App Hooks(Runtime)

  • 插件使用钩子

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

Nitro Plugin

  • 使用钩子

    jsx
    //~/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)
      })
    })

参考文献

Released under the MIT License.