Browser Renderer

Last updated Oct 12, 2026Harlan Wilton

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

If playwright-core is missing, the build fails and prints the install command.

To use a local Chrome in development and local builds, also install chrome-launcher:

pnpm i -D chrome-launcher

yarn add -D chrome-launcher

npm install -D chrome-launcher

Without chrome-launcher, the module downloads Chromium through Playwright on the first render.

Page screenshots

For defineOgImageScreenshot(), enable screenshots explicitly:

nuxt.config.ts

export default defineNuxtConfig({
  ogImage: {
    browser: true
  },
  routeRules: {
    '/': { prerender: true }
  }
})

Replace / with your screenshot page routes. Then call defineOgImageScreenshot() 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.

Component images

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

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)
Doesn't work on most hosting providers

Development & CI Browser

In development, chrome-launcher finds a local Chrome for the module to use, if you install it.

Otherwise, it uses playwright when installed, or downloads Chromium through playwright-core.

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

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