defineOgImageScreenshot()

Introduction

The defineOgImageScreenshot() composable allows you to take a screenshot of the page and use it as the image.

Setup

Enable screenshots explicitly in nuxt.config.ts:

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

Install playwright-core as described in the Browser guide. Call defineOgImageScreenshot() in the page you want to capture. Replace / with your screenshot page routes.

A browser provider object, such as the Cloudflare configuration, also enables screenshots. Without opt-in, a production build that calls defineOgImageScreenshot() fails and names the file. In development, the page throws a setup error.

browser: true enables the renderer. It does not prerender routes or enable browser support on incompatible hosts. For production, prerender screenshot pages during the build or configure Cloudflare Browser Rendering.

Props

width

• Type: number | (() => number) | Ref<number>
• Default: 1200

The width of the screenshot.

height

• Type: number | (() => number) | Ref<number>
• Default: 600

The height of the screenshot.

colorScheme

• Type: 'dark' | 'light'
• Default: 'light'

The color scheme to use when generating the image. This is useful for generating dark mode images.

defineOgImageScreenshot({
  colorScheme: 'dark'
})

delay

• Type: number
• Default: 0

The delay to wait before taking the screenshot. This is useful if you want to wait for animations to complete.

defineOgImageScreenshot({
  // wait 2 seconds
  delay: 2000
})

mask

• Type: string
• Default: undefined

HTML selectors the module should remove from the image. Useful for removing popup banners or other elements that may be in the way.

defineOgImageScreenshot({
  mask: '.popup-banner, .cookie-banner'
})

selector

• Type: string
• Default: undefined

The selector to take a screenshot of. This is useful if you want to exclude header / footer elements.

defineOgImageScreenshot({
  selector: '.page-content'
})