---
title: "Nitro Hooks"
description: "Hook into the Nuxt OG Image runtime."
canonical_url: "https://nuxtseo.com/docs/og-image/nitro-api/nitro-hooks"
last_updated: "2026-05-09T14:46:41.750Z"
---

Runtime hooks for Nuxt OG Image.

## `nuxt-og-image:context`

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

The module calls this when it generates the render context. Within this object, you can control the entire behavior of the render.

```ts [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, ctx: OgImageRenderEventContext) => void | Promise<void>`

The module calls this when it generates the Satori vnodes. Use this hook to modify the final content passed to Satori.

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

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('nuxt-og-image:satori:vnodes', async (vnodes, ctx) => {
    const children = vnodes.props.children
    if (!Array.isArray(children))
      return
    for (const child of children) {
      if (typeof child === 'string' || !child)
        continue
      // remove icon class from Nuxt Icon
      if (child.props?.class)
        child.props.class = child.props.class.replace('icon', '')
    }
  })
})
```

## `nuxt-og-image:takumi:nodes`

**Type:** `async (nodes: Node, ctx: OgImageRenderEventContext) => void | Promise<void>`

The module calls this when it generates the Takumi nodes. Use this hook to modify the final node tree passed to the Takumi renderer. The `Node` type comes from `@takumi-rs/core`.

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

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('nuxt-og-image:takumi:nodes', async (nodes, ctx) => {
    // modify the Takumi node tree before rendering
    if (nodes.style)
      nodes.style.backgroundColor = '#000000'
  })
})
```