Runtime hooks for Nuxt OG Image.
nuxt-og-image:context
Type:
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:
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?