Nuxt API
defineOgImageScreenshot()
Last updated by Harlan Wilton in feat!: rename chromium renderer to browser, add cloudflare support (#461)
* feat!: rename chromium renderer to browser, add cloudflare support
BREAKING CHANGES:
- Renamed `chromium` renderer to `browser`
- Component suffix `.chromium.vue` → `.browser.vue`
- Config `chromium: 'playwright'` → `browser: { provider: 'playwright' }`
- Internal: `useChromiumRenderer()` → `useBrowserRenderer()`
New features:
- Cloudflare Browser Rendering support via `@cloudflare/puppeteer`
- New config: `browser: { provider: 'cloudflare', binding: 'BROWSER' }`
- Auto-fallback for cloudflare provider: chrome-launcher (dev), playwright (prerender), cloudflare (runtime)
- Playwright/Puppeteer API compatibility layer in screenshot.ts
* docs: add chromium→browser migration and cloudflare support docs
- Add chromium→browser rename section to v6 migration guide
- Document cloudflare browser rendering setup in browser renderer docs
- Add configuration examples for cloudflare provider
* fix: resolve type errors for browser renderer refactor
- Update ProviderName type: 'chromium' → 'browser' in dependencies.ts
- Add BrowserConfig import and browser property to ModuleOptions
- Update createBrowser type declaration to accept optional H3Event
- Fix cloudflare binding to use lazy-loaded puppeteer with local types
- Fix colorPreference comparison (remove impossible 'no-preference' check)
- Update defineOgImageScreenshot renderer to 'browser'
- Update client/pages/index.vue chromium → browser in templates
* chore: remove working files that should not be committed.
Introduction
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'
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 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
The selector to take a screenshot of. This is useful if you want to exclude header / footer elements.
defineOgImageScreenshot({
selector: '.page-content'
})
Did this page help you?
On this page