---
title: "Browser Renderer · Nuxt OG Image · Nuxt SEO"
meta:
  "og:description": "Learn how, when and why to use the Browser renderer."
  "og:title": "Browser Renderer · Nuxt OG Image · Nuxt SEO"
  description: "Learn how, when and why to use the Browser renderer."
---

**Renderers**

# **Browser Renderer**

Last updated **Feb 5, 2026** by [Harlan Wilton](https://github.com/harlan-zw) in [feat!: rename chromium renderer to browser, add cloudflare support (#461) * feat!: rename chromium renderer to browser, add cloudflare support BREAKING CHANGES: - Renamed `chromium` renderer to `browser` - Component suffix `.chromium.vue` → `.browser.vue` - Config `chromium: 'playwright'` → `browser: { provider: 'playwright' }` - Internal: `useChromiumRenderer()` → `useBrowserRenderer()` New features: - Cloudflare Browser Rendering support via `@cloudflare/puppeteer` - New config: `browser: { provider: 'cloudflare', binding: 'BROWSER' }` - Auto-fallback for cloudflare provider: chrome-launcher (dev), playwright (prerender), cloudflare (runtime) - Playwright/Puppeteer API compatibility layer in screenshot.ts * docs: add chromium→browser migration and cloudflare support docs - Add chromium→browser rename section to v6 migration guide - Document cloudflare browser rendering setup in browser renderer docs - Add configuration examples for cloudflare provider * fix: resolve type errors for browser renderer refactor - Update ProviderName type: 'chromium' → 'browser' in dependencies.ts - Add BrowserConfig import and browser property to ModuleOptions - Update createBrowser type declaration to accept optional H3Event - Fix cloudflare binding to use lazy-loaded puppeteer with local types - Fix colorPreference comparison (remove impossible 'no-preference' check) - Update defineOgImageScreenshot renderer to 'browser' - Update client/pages/index.vue chromium → browser in templates * chore: remove working files that should not be committed](https://github.com/nuxt-modules/og-image/pull/461).

[Copy for LLMs

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 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 renderer is determined by the component filename suffix. Create your component with a `.browser.vue` suffix:

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

The module automatically detects the renderer from the filename — no configuration needed.

## [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 to be installed
- Much slower than Satori/Takumi, using it at runtime is not recommended
- Doesn't work on most hosting providers

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

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

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

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

Browser 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**](https://nuxtseo.com/docs/og-image/guides/compatibility) 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.

### [Installation](#installation-1)

```
pnpm add @cloudflare/puppeteer
```

### [Configuration](#configuration)

Configure the browser provider and binding name in your `nuxt.config.ts`:

nuxt.config.ts

```
export default defineNuxtConfig({
  ogImage: {
    browser: {
      provider: 'cloudflare',
      binding: 'BROWSER' // your wrangler binding name
    }
  }
})
```

Configure the browser binding in `wrangler.toml`:

wrangler.toml

```
name = "my-worker"
compatibility_date = "2025-09-15"
nodejs_compat = true

[browser]
binding = "BROWSER"
```

### [How It Works](#how-it-works)

When using the cloudflare 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.

### [Limitations](#limitations)

- Free plan: 3 new browsers/minute
- Paid plan: 30 new browsers/minute
- 60-second idle timeout (handled automatically)

See [**Cloudflare Browser Rendering limits**](https://developers.cloudflare.com/browser-rendering/limits/) for details.

[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? **

[**Satori Renderer** Learn how to use the Satori renderer.](https://nuxtseo.com/docs/og-image/renderers/satori) [**Zero Runtime** Create OG Images without the server runtime overhead.](https://nuxtseo.com/docs/og-image/guides/zero-runtime)

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