---
title: "Browser Renderer · Nuxt OG Image · Nuxt SEO"
canonical_url: "https://nuxtseo.com/docs/og-image/renderers/browser"
last_updated: "2026-08-16T09:55:40.219Z"
meta:
  description: "Learn how, when and why to use the Browser renderer."
  "og:description": "Learn how, when and why to use the Browser renderer."
  "og:title": "Browser Renderer · Nuxt OG Image · Nuxt SEO"
---

Nuxt SEO on GitHub

**OG Image v6** is here. Looking for an older version? [~~View v5 docs ~~](https://nuxtseo.com/docs/og-image/v5/getting-started/introduction).

](https://nuxtseo.com/docs/og-image/getting-started/introduction)

](https://nuxtseo.com/docs/og-image/api/define-og-image)

](https://nuxtseo.com/docs/og-image/releases/v6)

Switch to OG Image](https://nuxtseo.com/docs/og-image/getting-started/introduction)Switch to Nuxt SEO](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)Switch to Robots](https://nuxtseo.com/docs/robots/getting-started/introduction)Switch to Sitemap](https://nuxtseo.com/docs/sitemap/getting-started/introduction)Switch to Schema.org](https://nuxtseo.com/docs/schema-org/getting-started/introduction)Switch to Link Checker](https://nuxtseo.com/docs/link-checker/getting-started/introduction)Switch to SEO Utils](https://nuxtseo.com/docs/seo-utils/getting-started/introduction)Switch to Site Config](https://nuxtseo.com/docs/site-config/getting-started/introduction)Switch to Skew Protection](https://nuxtseo.com/docs/skew-protection/getting-started/introduction)Switch to AI Ready](https://nuxtseo.com/docs/ai-ready/getting-started/introduction)

**Renderers**

# **Browser Renderer**

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

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

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

## Usage

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~~**](https://nuxtseo.com/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.

nuxt.config.ts

```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~~**](https://nuxtseo.com/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~~**](https://nuxtseo.com/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.

**Was this page helpful?**

### **Related **

[**Takumi Renderer**](https://nuxtseo.com/docs/og-image/renderers/takumi)

[**Cloudflare Deployment**](https://nuxtseo.com/docs/og-image/guides/cloudflare)

[**Performance**](https://nuxtseo.com/docs/og-image/guides/performance)

[**Install Nuxt Site Config**](https://nuxtseo.com/docs/site-config/getting-started/installation)

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