---
title: "Browser Renderer"
description: "Learn how, when and why to use the Browser renderer."
canonical_url: "https://nuxtseo.com/docs/og-image/renderers/browser"
last_updated: "2026-09-25T20:11:36.979Z"
---

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

::code-group
```sh [pnpm]
pnpm i -D playwright-core
```

```bash [yarn]
yarn add -D playwright-core
```

```bash [npm]
npm install -D playwright-core
```
::

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

## Page screenshots

For `defineOgImageScreenshot()`{lang="ts"}, enable screenshots explicitly:

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  ogImage: {
    browser: true
  },
  routeRules: {
    '/': { prerender: true }
  }
})
```

Replace `/` with your screenshot page routes.
Then call `defineOgImageScreenshot()`{lang="ts"} in each page you want to capture.
A browser provider object also enables screenshots.

Screenshot calls require this opt-in even when you have a `.browser.vue` component.
The module does not scan pages for screenshot calls.

During `nuxt build`, prerendering uses a local browser and writes image files for production to serve.
`browser: true` does not enable runtime screenshots on incompatible hosts.
For runtime screenshots on Cloudflare, configure [Browser Rendering](#cloudflare-browser-rendering).

## Component images

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

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

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

## Pros

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

## Cons

- Requires a browser binary installation
- Much slower than Satori/Takumi, using it at runtime is not recommended (see [Performance](/docs/og-image/guides/performance#caching))
- Doesn't work on most hosting providers

## Development & CI 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.

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.

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  ogImage: {
    compatibility: {
      prerender: {
        browser: false
      }
    }
  }
})
```

## 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.

See the [renderer compatibility overview](/docs/og-image/renderers) for more information.

## 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 [Cloudflare deployment guide](/docs/og-image/guides/cloudflare#browser-rendering) 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.

## Sitemap

See the full [sitemap](/sitemap.md) for all pages.