Satori Renderer

Nuxt OG Image comes with two ways of rendering your images, the default way is using Satori.

It's not necessary to manually define the renderer as satori unless you set the default to the Chromium Renderer. Satori will be used to render images in all environments, unless you have explicitly disabled it.

export default defineNuxtConfig({
  // this is not necessary as satori is already the default
  ogImage: {
    defaults: {
      renderer: 'satori'
    }
  }
})

defineOgImageComponent('MyOgImage', {
  renderer: 'satori' // only when the default has been changed
})

Pros

• Fast
• Works on all environments

Cons

• A number of limitations (see below)

Limitations

It's important to familiarize yourself Satori with before you make more complex templates.

If you find Satori too difficult to work with, you can use the Chromium Renderer renderer instead.

To learn more about the limitations and working around them, see:

• Styling
• Icons and Images