Chromium Renderer

Nuxt OG Image comes with two ways of rendering your images, the non-default way is using Chromium to take screenshots.

Using Chromium is only recommended when you are prerendering all of your images.

export default defineNuxtConfig({
  // sets the default renderer to chromium
  ogImage: {
    defaults: {
      renderer: 'chromium'
    }
  }
})

defineOgImageComponent('MyOgImage', {
  renderer: 'chromium'
})

Pros

• Much easier to create complex designs
• Render JPEGs without using sharp
• Page screenshots are simple and saves time

Cons

• Requires a Chromium binary to be installed
• Much slower than Satori, using it at runtime is not recommended
• Doesn't work on most hosting providers

Development Chromium

When running in a development environment, a local Chrome / Chromium binary will be used, if available.

If it's not, then the Chromium renderer will be disabled.

Prerenderer / CI Chromium

When prerendering your images in a CI environment, the module will automatically install a Chromium binary for you.

If you'd like to opt-out of this, you should disable the binding.

export default defineNuxtConfig({
  ogImage: {
    compatibility: {
      prerender: {
        chromium: false
      }
    }
  }
})

Runtime Chromium

Chromium will only be enabled by default in runtime environments if you have explicitly included the playwright dependency in your project and the target environment is compatible.

pnpm i -D playwright

yarn add -D playwright

npm install -D playwright

Check the compatibility guide for more information.