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

pnpm i -D playwright-core

yarn add -D playwright-core

npm install -D playwright-core

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

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

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

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.

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

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 guide for more information.

Cloudflare Browser Rendering

For Cloudflare Workers/Pages deployments, you can use Cloudflare Browser Rendering for runtime screenshots.

Installation

pnpm add @cloudflare/puppeteer

Configuration

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

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

Configure the browser binding in wrangler.toml:

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

[browser]
binding = "BROWSER"

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

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

See Cloudflare Browser Rendering limits for details.