Nitro Hooks

Hook into the Nuxt OG Image runtime.

Runtime hooks for Nuxt OG Image.

nuxt-og-image:context

Type: async (ctx: OgImageRenderEventContext) => void | Promise<void>

Called when the render context is generated. Within this object you can the entire behaviour of the render.

server/plugins/ogImage.ts
import { defineNitroPlugin } from 'nitropack/runtime/plugin'

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('nuxt-og-image:context', async (ctx) => {
    // e is the H3Event
    if (!ctx.e.path.startsWith('/fancy-og-images/'))
      return

    // modify props (usually better suited in route rules)
    ctx.options.props.isFancy = true
    // make all images use the same cache key
    ctx.key = 'fancy-og-images'
  })
})

nuxt-og-image:satori:vnodes

Type: async (vnodes: VNode[]) => void | Promise<void>

Called when the Satori vnodes are generated. Using this hook you can modify the final content that is passed to Satori.

server/plugins/ogImage.ts
import { defineNitroPlugin } from 'nitropack/runtime/plugin'

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('nuxt-og-image:satori:vnodes', async (vnodes) => {
    for (const child of vnodes.children) {
      // remove icon class from Nuxt Icon
      if (child.prop.class)
        child.prop.class = child.props.class.replace('icon', '')
    }
  })
})
Did this page help you?