Chromium Renderer · Nuxt OG Image · Nuxt SEO

-
-
-
-

[1.4K](https://github.com/harlan-zw/nuxt-seo)

[Nuxt SEO on GitHub](https://github.com/harlan-zw/nuxt-seo)

You're viewing **OG Image v5** documentation. For the latest,

.

OG Image

-
-
-
-
-
-
-
-
-
-

Search…```k`` /`

v5

- Playgrounds
- [Discord Support](https://discord.com/invite/275MBUBvgP)

### Getting Started

-
-
-
-

### Core Concepts

-
-
-
-
-
-
-
-
-
-
-
-
-
-

### Integrations

-
-

Core Concepts

# Chromium Renderer

[Copy for LLMs](https://nuxtseo.com/docs/og-image/v5/guides/chromium.md)

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.

Set Default

defineOgImageComponent

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

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

## [Pros](#pros)

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

## [Cons](#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](#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](#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.

nuxt.config.ts

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

## [Runtime Chromium](#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

yarn

npm

```
pnpm i -D playwright
```

```
yarn add -D playwright
```

```
npm install -D playwright
```

Check the

 guide for more information.

[Edit this page](https://github.com/nuxt-modules/og-image/blob/v5.1.13/docs/content/3.guides/1.chromium.md)

[Markdown For LLMs](https://nuxtseo.com/docs/og-image/v5/guides/chromium.md)

Did this page help you?

On this page

- [Pros](#pros)
- [Cons](#cons)
- [Development Chromium](#development-chromium)
- [Prerenderer / CI Chromium](#prerenderer-ci-chromium)
- [Runtime Chromium](#runtime-chromium)

[GitHub](https://github.com/harlan-zw/nuxt-seo) [ Discord](https://discord.com/invite/275MBUBvgP)

###

-
-

Modules

-
-
-
-
-
-
-
-
-

###

-
-
-

###

Nuxt

-
-
-
-
-

Vue

-
-
-
-
-
-
-
-

###

-
-
-
-
-
-
-
-
-
-

Copyright © 2023-2026 Harlan Wilton - [MIT License](https://github.com/harlan-zw/nuxt-seo/blob/main/license) · [mdream](https://mdream.dev)