Nuxt API
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?
On this page