Releases · nuxt-modules/og-image

Normalize font casing - by @harlan-zw (61f8f)
Svg dimensions not properly resolving in runtime instances - by @harlan-zw (4a5c8)
Resolve lint errors for CI - by @harlan-zw (aac48)

Contributors

harlan-zw

Assets 2

17 Mar 05:12

github-actions

v6.0.2

32f9f3f

v6.0.2

🐞 Bug Fixes

migration:
- Broken warning - by @harlan-zw (d87d8)
satori:
- Better css var matching - by @harlan-zw (251f1)
- Infer SVG dimensions from parent - by @harlan-zw (94ef0)
takumi:
- Broken font weight matching - by @harlan-zw (3f0c5)
- Html -> nodes attr ordering - by @harlan-zw (35ea6)

Contributors

harlan-zw

Assets 2

13 Mar 05:02

github-actions

v6.0.1

0209474

v6.0.1

🐞 Bug Fixes

Support node cluster - by @harlan-zw (e5c25)
migration: defineOgImage({ url }) -> useSeoMeta - by @harlan-zw in #496 (2e762)

Contributors

harlan-zw

Assets 2

12 Mar 07:26

github-actions

v6.0.0

38ef49a

v6.0.0

Nuxt OG Image v6 is the next major release.

Nuxt OG Image v6 brings a complete overhaul focused on performance, modern tooling, and developer experience.

📣 Highlights

🚀 Takumi - Takumi is now the recommended renderer, offering 2-10x faster image generation with the same feature set as Satori
🎨 First-class CSS support - Tailwind v4, UnoCSS, CSS variables, and Nuxt UI v3 colors all just work out of the box
🖥️ Redesigned DevTools - improved OG image debugging experience with better previews, accessibility, and Bluesky social card support

📖 Migration Guide

Full migration guide: https://nuxtseo.com/og-image/migration-guide/v6

Quick Migration

npx nuxt-og-image migrate v6

Notable Changes

🚀 Takumi Renderer (Recommended)

Takumi is a Rust-based renderer that directly rasterizes to PNG/JPEG/WebP - no SVG intermediate step. It's 2-10x faster than Satori+Resvg.

See PR #414.

Takumi and Satori are feature-compatible within Nuxt OG Image - both support Tailwind CSS, custom fonts, emoji, edge runtimes, and all the same template features. The difference is speed: Takumi is always faster thanks to its Rust-based direct rasterization.

Use Takumi by creating components with the .takumi.vue suffix:

components/OgImage/MyTemplate.takumi.vue

See the Takumi docs for the full feature list.

🎨 First-Class CSS Support

Nuxt OG Image now has first-class support for multiple CSS approaches - not just Tailwind. All of these work out of the box with zero configuration:

See PR #430.

Tailwind v4 - build-time class extraction with Tailwind's CSS engine, @theme values just work
UnoCSS - full UnoCSS support
CSS Variables - use your app's CSS custom properties directly in OG image templates
Nuxt UI v3 - semantic colors (primary, secondary, etc.) are automatically resolved

No configuration needed.

🖥️ Redesigned DevTools

The OG image DevTools have been completely overhauled:

Better image preview and debugging
More accessible interface
Improved error reporting and diagnostics
Bluesky social card support

⚡ Install Renderer Dependencies

Renderer dependencies are no longer bundled. Install what you need based on your renderer and runtime.

See PR #415.

Takumi (recommended):

npm i @takumi-rs/core # Node.js
npm i @takumi-rs/wasm # Edge runtimes

Satori:

npm i satori @resvg/resvg-js # Node.js
npm i satori @resvg/resvg-wasm # Edge runtimes

Browser:

npm i playwright-core

Running nuxi dev will prompt you to install missing dependencies automatically.

🖼️ Multiple OG Images Per Page

Define multiple images with different dimensions for different platforms. Shared props are passed once and applied to all variants.

See PR #305.

Shared Props with Variants (Recommended)

Pass shared props as the second argument and size variants as the third — no prop duplication needed:

defineOgImage('NuxtSeo', { title: 'My Page' }, [
  { key: 'og' }, // Default 1200x600 for Twitter/Facebook
  { key: 'whatsapp', width: 800, height: 800 }, // Square for WhatsApp
])

Per-variant props override shared props when needed:

defineOgImage('NuxtSeo', { title: 'My Page', description: 'Full description' }, [
  { key: 'og' },
  { key: 'whatsapp', width: 800, height: 800, props: { description: 'Short' } },
])

Array Syntax

Alternatively, pass all options inline per variant:

defineOgImage('NuxtSeo', [
  { props: { title: 'My Page' } },
  { props: { title: 'My Page' }, key: 'whatsapp', width: 800, height: 800 },
])

🔤 @nuxt/fonts Integration

Custom fonts now use @nuxt/fonts instead of the legacy ogImage.fonts config.

See PR #432.

export default defineNuxtConfig({
  modules: ['@nuxt/fonts', 'nuxt-og-image'],
  fonts: {
    families: [
      { name: 'Inter', weights: [400, 700], global: true }
    ]
  }
})

The global: true option is required for fonts to be available in OG Image rendering.

📦 Component Renderer Suffix

OG Image components now require a renderer suffix in their filename. This enables automatic renderer detection, multiple renderer variants, and tree-shaking.

See PR #433.

# Before
components/OgImage/MyTemplate.vue

# After
components/OgImage/MyTemplate.takumi.vue # Recommended
components/OgImage/MyTemplate.satori.vue

Run the migration CLI to rename automatically:

npx nuxt-og-image migrate v6

🏷️ Community Templates Must Be Ejected

Community templates (NuxtSeo, SimpleBlog, etc.) are no longer bundled in production. Eject them to your project before building.

See PR #426.

npx nuxt-og-image eject NuxtSeo

Templates continue to work in development without ejecting.

🔗 New URL Structure

OG Image URLs now use a Cloudinary-style format with options encoded in the path. This enables better CDN caching since identical options produce identical URLs.

See PR #305.

v5	v6
`/__og-image__/image/`	`/_og/d/`
`/__og-image__/static/`	`/_og/s/`

🚨 Breaking Changes

Tech debt cleanup for v6 - by @harlan-zw and Claude Opus 4.5 in #410 (598f3)
Multiple og images, reworked paths - by @harlan-zw and Claude Opus 4.5 in #305 (c9058)
Require explicit provider dependencies - by @harlan-zw and Claude Opus 4.5 in #415 (94eae)
Require ejecting community templates - by @harlan-zw in #426 (22cbd)
Ignore query params in cache key by default - by @harlan-zw in #427 (407a4)
Require component suffix for renderer target - by @harlan-zw and Copilot Autofix powered by AI in #433 (357e3)
Native tailwind v4 support - by @harlan-zw in #430 (0e046)
Nuxt/fonts integration - by @harlan-zw and Claude Opus 4.5 in #432 (c64fd)
Rename chromium renderer to browser, add cloudflare support - by @harlan-zw in #461 (55594)
Drop component support - by @harlan-zw (d0d2f)
Drop css-inline support - by @harlan-zw (0936a)
takumi: Revert back to default DPI 1 - by @harlan-zw (d60e2)

🚀 Features

Add Takumi renderer support - by @harlan-zw and Claude Opus 4.5 (f1d1f)
Add linkedom as explicit dependency for takumi renderer - by @harlan-zw (0b9f8)
CI build cache - by @harlan-zw and Claude Opus 4.5 in #413 (51f23)
Add Takumi renderer support - by @harlan-zw and Claude Opus 4.5 in #414 (7a347)
Local emoji sources - by @harlan-zw and Claude Opus 4.5 (611d0)
Local emoji sources - by @harlan-zw and Claude Opus 4.5 in #420 (c3db6)
New templates - by @harlan-zw in #409 (43436)
Add UnoCSS provider for OG image class resolution - by @harlan-zw in #442 (c5a14)
Rework component resolution for multi-renderer support - by @harlan-zw in #450 [<...