Browser 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)

**OG Image v6** is here! Looking for an older version?

.

OG Image

-
-
-
-
-
-
-
-
-
-

Search…```k`` /`

v6 (latest)

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

### Getting Started

-
-
-
-

### Core Concepts

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

### Overview

-
-
-
-

### Integrations

-
-
-

Renderers

# Browser Renderer

[Copy for LLMs](https://nuxtseo.com/docs/og-image/renderers/browser.md)

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

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

## [Installation](#installation)

pnpm

yarn

npm

```
pnpm i -D playwright-core
```

```
yarn add -D playwright-core
```

```
npm install -D playwright-core
```

In development and CI/prerender environments, the browser will auto-install if needed.

## [Usage](#usage)

The component filename suffix determines the renderer. Create your component with a `.browser.vue` suffix:

```
components/OgImage/MyTemplate.browser.vue
```

The module automatically detects the renderer from the filename - zero-config.

## [Pros](#pros)

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

## [Cons](#cons)

- Requires a browser binary installation
- Much slower than Satori/Takumi, using it at runtime is not recommended (see)
- Doesn't work on most hosting providers

## [Development Browser](#development-browser)

The module uses a local Chrome / Chromium binary in development environments, if available.

If it's not available, the module disables the Browser renderer.

## [Prerenderer / CI Browser](#prerenderer-ci-browser)

When prerendering your images in a CI environment, the module will automatically install a browser 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: {
        browser: false
      }
    }
  }
})
```

## [Runtime Browser](#runtime-browser)

The module only enables the Browser renderer by default in runtime environments if you explicitly include the `playwright-core` dependency and the target environment is compatible.

Check the

 guide for more information.

## [Cloudflare Browser Rendering](#cloudflare-browser-rendering)

For Cloudflare Workers/Pages deployments, you can use [Cloudflare Browser Rendering](https://developers.cloudflare.com/browser-rendering/) for runtime screenshots.

See the

 for setup instructions.

When using the [Cloudflare](https://cloudflare.com) provider:

- **Development:** Uses local `chrome-launcher` (zero config)
- **Prerender/Build:** Uses `playwright`
- **Production Runtime:** Uses Cloudflare Browser Rendering

The module automatically handles session reuse and timeout handling for optimal performance within Cloudflare's rate limits.

[Edit this page](https://github.com/nuxt-modules/og-image/edit/main/docs/content/2.renderers/3.browser.md)

[Markdown For LLMs](https://nuxtseo.com/docs/og-image/renderers/browser.md)

Did this page help you?

On this page

- [Installation](#installation)
- [Usage](#usage)
- [Pros](#pros)
- [Cons](#cons)
- [Development Browser](#development-browser)
- [Prerenderer / CI Browser](#prerenderer-ci-browser)
- [Runtime Browser](#runtime-browser)
- [Cloudflare Browser Rendering](#cloudflare-browser-rendering)

[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)