---
title: "Nuxt Hooks"
description: "Hook into the Nuxt OG Image build-time behaviour."
canonical_url: "https://nuxtseo.com/docs/og-image/v5/api/nuxt-hooks"
last_updated: "2026-05-07T01:42:37.405Z"
---

Built-time hooks for Nuxt OG Image.

## `nuxt-og-image:runtime-config`

**Type:** `(config: ModuleOptions) => HookResult`

Allows you to modify the Nuxt OG IMage runtime config at build-time.

Useful for other modules that want to modify the config.

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  hooks: {
    'nuxt-og-image:runtime-config': (config) => {
      // modify the config
      config.colorPreference = 'dark'
    }
  }
})
```

## `nuxt-og-image:components`

**Type:** `(ctx: { components: OgImageComponent[] }) => HookResult`

This hook allows you to programmatically modify the components that are used by the module.

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  hooks: {
    'nuxt-og-image:components': (ctx) => {
      // remove community components
      ctx.components = ctx.components.filter(c => c.category !== 'community')
      // add our own community component
      const myComponentPath = resolve('./MyComponent.vue')
      const myComponentContents = fsp.readFile(myComponentPath)
      components.push({
        hash: hash(myComponentContents),
        pascalName: 'MyComponent',
        kebabName: 'my-component',
        path: nuxt.options.dev ? myComponentPath : undefined,
        category: 'community',
        credits: 'My Company',
      })
    }
  }
})
```