Nuxt API

Nuxt Hooks

Last updated by Harlan Wilton in chore: bump.

Build-time Hooks

nuxt-og-image:runtime-config

Type: (config: ModuleOptions) => HookResult

Modify the Nuxt OG Image runtime config at build-time.

nuxt.config.ts
export default defineNuxtConfig({
  hooks: {
    'nuxt-og-image:runtime-config': (config) => {
      config.colorPreference = 'dark'
    }
  }
})

nuxt-og-image:components

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

Programmatically modify the components used by the module.

nuxt.config.ts
export default defineNuxtConfig({
  hooks: {
    'nuxt-og-image:components': (ctx) => {
      ctx.components = ctx.components.filter(c => c.category !== 'community')
    }
  }
})

Runtime Hooks

Nitro hooks for runtime OG image generation.

nuxt-og-image:context

Type: (ctx: OgImageRenderEventContext) => HookResult

Modify the OG image render context before generation.

server/plugins/og-image.ts
export default defineNitroPlugin((nitro) => {
  nitro.hooks.hook('nuxt-og-image:context', (ctx) => {
    // modify ctx.options, ctx.path, etc.
  })
})

nuxt-og-image:satori:vnodes

Type: (vnodes: VNode, ctx: OgImageRenderEventContext) => HookResult

Modify the Satori vnodes before rendering to SVG.

server/plugins/og-image.ts
export default defineNitroPlugin((nitro) => {
  nitro.hooks.hook('nuxt-og-image:satori:vnodes', (vnodes, ctx) => {
    // modify vnodes before satori processes them
  })
})
Did this page help you?