OG Image
Api

defineOgImageScreenshot

Define an OG Image that takes a screenshot of the page.

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

This requires the chromium renderer, check the chromium guide for more information.

Props

colorScheme

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

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
  • Required: false

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
  • Required: false

HTML selectors that should be removed 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
  • Required: false

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

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