Chromium Renderer

The Chromium renderer uses a real browser to take screenshots, giving you full CSS support.

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

Installation

pnpm i -D playwright-core

yarn add -D playwright-core

npm install -D playwright-core

Usage

export default defineNuxtConfig({
  ogImage: {
    defaults: {
      renderer: 'chromium'
    }
  }
})

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

Pros

• Full CSS support - any design you can build
• Render JPEGs without using sharp
• Page screenshots are simple and saves time

Cons

• Requires a Chromium binary to be installed
• Much slower than Satori/Takumi, 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-core dependency in your project and the target environment is compatible.

Check the compatibility guide for more information.