nuxt-og-image-skilld

star 388

ALWAYS use when writing code importing "nuxt-og-image". Consult for debugging, best practices, or modifying nuxt-og-image, nuxt og image, og-image, og image.

harlan-zw By harlan-zw schedule Updated 4/23/2026
play_arrow Run Skill in Manus View GitHub

name: nuxt-og-image-skilld description: "ALWAYS use when writing code importing "nuxt-og-image". Consult for debugging, best practices, or modifying nuxt-og-image, nuxt og image, og-image, og image." metadata: version: 6.0.0-beta.46 generated_by: Claude Code · Haiku 4.5 generated_at: 2026-03-03

nuxt-modules/og-image nuxt-og-image

Version: 6.0.0-beta.46 (Mar 2026) Deps: @clack/prompts@^1.0.1, @nuxt/devtools-kit@^3.2.2, @nuxt/kit@^4.3.1, @vue/compiler-sfc@^3.5.29, chrome-launcher@^1.2.1, consola@^3.4.2, culori@^4.0.2, defu@^6.1.4, devalue@^5.6.3, exsolve@^1.0.8, lightningcss@^1.31.1, magic-string@^0.30.21, magicast@^0.5.2, mocked-exports@^0.1.1, nuxt-site-config@^3.2.21, nypm@^0.6.5, ofetch@^1.5.1, ohash@^2.0.11, pathe@^2.0.3, pkg-types@^2.3.0, radix3@^1.1.2, sirv@^3.0.2, std-env@^3.10.0, strip-literal@^3.1.0, tinyexec@^1.0.2, tinyglobby@^0.2.15, ufo@^1.6.3, ultrahtml@^1.6.0, unplugin@^3.0.0 Tags: latest: 5.1.13 (Dec 2025), beta: 6.0.0-beta.46 (Mar 2026)

References: package.json — exports, entry points • README — setup, basic usage • Docs — API reference, guides • GitHub Issues — bugs, workarounds, edge cases • Releases — changelog, breaking changes, new APIs

Search

Use skilld search instead of grepping .skilld/ directories — hybrid semantic + keyword search across all indexed docs, issues, and releases. If skilld is unavailable, use npx -y skilld search.

skilld search "query" -p nuxt-og-image
skilld search "issues:error handling" -p nuxt-og-image
skilld search "releases:deprecated" -p nuxt-og-image

Filters: docs:, issues:, releases: prefix narrows by source type.

API Changes

This section documents version-specific API changes — prioritize recent major/minor releases.

v6.0.0 API Changes

Breaking Changes (v5 → v6)

  • BREAKING: <OgImage> and <OgImageScreenshot> Vue components removed — use defineOgImage() and defineOgImageScreenshot() composables instead source

  • BREAKING: defineOgImageComponent() deprecated — use defineOgImage(component, props, options) instead with component name as first argument source

  • BREAKING: Component renderer suffix now required — rename components/OgImage/MyTemplate.vue to MyTemplate.takumi.vue, MyTemplate.satori.vue, or MyTemplate.browser.vue based on renderer source

  • BREAKING: Renderer dependencies no longer bundled — explicitly install @takumi-rs/core (Node.js) or @takumi-rs/wasm (Edge), satori + @resvg/resvg-js, or playwright-core based on your renderer choice source

  • BREAKING: ogImage.fonts config removed — use @nuxt/fonts module instead; Inter (400, 700) bundled as zero-config fallback source

  • BREAKING: ogImage.componentOptions config removed — components are no longer registered globally source

  • BREAKING: defaults.renderer and renderer option on defineOgImage() removed — renderer determined by component filename suffix only source

  • BREAKING: OG Image URL paths changed from /__og-image__/* to /_og/* with new Cloudinary-style encoding; query params no longer in cache key by default source

  • BREAKING: chromium renderer renamed to browser — update component suffixes and config options source

  • BREAKING: browser: 'node' compatibility option removed — use browser: 'playwright' instead source

  • BREAKING: Nuxt Content v2 support removed — upgrade to Nuxt Content v3 and use defineOgImage() in page components source

New Features (v6)

  • NEW: defineOgImage() first-argument component syntax — defineOgImage('MyComponent', props, options) replaces defineOgImageComponent() source

  • NEW: Multiple OG images per page via key parameter — generate different dimensions for different platforms (e.g., 1200x600 for Twitter, 800x800 for WhatsApp) source

  • NEW: Takumi renderer as recommended option — 2-10x faster than Satori with comprehensive CSS support and default 2x DPI for crisp images source

  • NEW: Renderer-specific component variants — create MyTemplate.satori.vue and MyTemplate.takumi.vue in same directory for multiple renderer implementations source

  • NEW: @nuxt/fonts integration — custom fonts work automatically when module installed; Inter bundled as zero-config default source

  • NEW: First-class CSS support — Tailwind v4 with @theme, UnoCSS, CSS variables, and Nuxt UI v3 semantic colors all just work out-of-box source

  • NEW: cacheQueryParams config option — restore v5 behavior of including query params in cache keys source

  • NEW: cacheVersion config option — controls cache key namespacing and allows manual cache invalidation source

  • NEW: getOgImagePath() utility (auto-imported) — programmatically get OG image URLs instead of hardcoding them source

  • NEW: Cloudflare Browser Rendering support — use provider: 'cloudflare', binding: 'BROWSER' in config for runtime screenshots on Cloudflare source

Import Path Changes (v6)

  • BREAKING: #nuxt-og-image-utils alias removed — use #og-image/shared instead source

  • BREAKING: useOgImageRuntimeConfig import path changed — import from #og-image/app/utils not #og-image/shared source

Configuration Options Removed (v6)

  • BREAKING: strictNuxtContentPaths config removed — this option had no effect in Nuxt Content v3 source

Also changed: Community templates must be ejected before production builds · Hash mode URLs for prerendering with long options · Sharp JPEG errors now throw instead of silent fallback · defineOgImage() now returns array of generated paths

Best Practices

  • Use Takumi renderer by default — 2-10x faster than Satori with comprehensive CSS support including gradients, shadows, opacity, CSS Grid, transforms, and filters source

  • Name OG image components with renderer suffix (e.g., MyTemplate.takumi.vue) — enables automatic renderer detection, tree-shaking of unused code, and supports multiple renderer variants of the same component source

  • Enable zeroRuntime for prerendered-only apps — removes 81% of Nitro renderer code from production bundle when all OG images are generated at build time source

  • Persist runtimeCacheStorage with Redis or KV bindings in production — default memory cache clears on server restart; configure via Nitro plugin for environment-specific connection details source

  • Enable buildCache in CI/CD pipelines — caches rendered images between deployments to skip regeneration of identical content; configure GitHub Actions or GitLab CI to persist the cache directory source

  • Configure custom fonts only via @nuxt/fonts with global: true — manual CSS @font-face or CDN links do not work in OG image renderers; Inter (400, 700) is bundled as fallback source

  • Use props-based pattern for i18n — resolve translations at page level and pass as props rather than using useI18n() inside OG components; components render in isolated server context without locale context source

  • Create multiple OG images with shared props — pass shared props as second argument and size/key variants as third array to reduce duplication across Twitter, Facebook, WhatsApp sizes source

  • Avoid wildcard route rules with caching — patterns like '/**' with swr/isr/cache break OG image routes; use specific patterns like '/blog/**' instead source

Install via CLI
npx skills add https://github.com/harlan-zw/request-indexing --skill nuxt-og-image-skilld
Repository Details
star Stars 388
call_split Forks 32
navigation Branch main
article Path SKILL.md
More from Creator
harlan-zw
harlan-zw Explore all skills →