NuxtSEO
OG Image v6 is in beta! Try the v6 docs .
Getting Started

Troubleshooting Nuxt OG Image

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.

Debugging

Nuxt DevTools

The best tool for debugging is the Nuxt DevTools integration with Nuxt OG Image.

This will show you your OG Image and give you all of the debug information.

Debug Config

You can enable the debug option which will give you more granular output.

Submitting an Issue

You can use the following Stackblitz playgrounds to experiment with Nuxt OG Image and submit issues.

If you run into any issues with Nuxt OG Image, it's recommended to clone of these playgrounds Stackblitz to reproduce the issue.

Stackblitz Compatibility

StackBlitz runs Nuxt within a webcontainer, so it has fairly limited compatibility.

  • You can't use anything that will require a fetch request to a different server (e.g. Google Fonts, custom Emojis, images, etc).
  • The chromium renderer is not supported
  • sharp is not supported, so you can't use JPEGs
  • inline-css is not supported, so you can't <style> blocks
Edit this page
Markdown For LLMs
Did this page help you?

Installation

Get started with Nuxt OG Image by installing the dependency to your project.

Tutorial: Your first OG Image

Get started with the module by setting up your first og:image on your home page.