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 as recommended renderer - 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 and accessibility
• 🦋 Devtools: Bluesky support - OG images now work with Bluesky social cards
• 📦 Opt-in dependencies - install only the renderer you need for smaller node_modules and faster CI
• ⚡ Smarter caching - build cache, CDN-friendly Cloudinary-style URLs, cleaner cache keys
• 🖼️ Multiple OG images per page - different dimensions for different platforms (WhatsApp square, Twitter landscape)
• 🔤 @nuxt/fonts integration - replaces legacy ogImage.fonts config

🚀 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

🦋 Devtools: Bluesky Support

OG images now generate the correct meta tags for Bluesky social cards, ensuring your images display correctly when shared on Bluesky.

⚡ 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.

🐛 Bug Fixes

• ff3bbd06 fix: require nuxt/fonts v0.13
• 055eadf9 fix: improved HMR
• 265cad56 fix: auto-eject components in dev
• 09d24449 fix: exclude default options from URLs (#431)
• 4ccd29e4 fix: always fallback to emoji fetching in edge runtimes (#429)
• 7b5b1af8 fix: avoid crashing main thread with resvg errors
• 97fb4b25 fix: support local fonts with zeroRuntime mode (#428)
• d22ede31 fix: support error.vue navigation
• 10886c92 fix: dynamic runtime cache storage (#425)
• 16ed4bf4 fix: force social platform cache invalidation between builds (#423)
• 349bd59a fix(satori): encoding bug for array text children (#422)
• 05f43596 fix: flakey images (#421)
• bbeeea16 fix: light-weight emoji resolves

📖 Migration Guide

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

Quick Migration

npx nuxt-og-image migrate v6

This will:

• Rename components to include renderer suffix (defaults to .takumi.vue)
• Migrate defineOgImageComponent() → defineOgImage()

Breaking Changes by Impact

High Impact (most users):

• Install renderer dependencies (#415)
• Component renderer suffix required (#433)
• Community templates must be ejected (#426)

Medium Impact (specific configurations):

• @nuxt/fonts required for custom fonts (#432)
• defineOgImageComponent deprecated (#433)
• UnoCSS runtime removed (#430)

Low Impact (edge cases):

• Cache key changes (#427)
• URL path changes (#305)
• Nuxt Content v2 support removed (#410)
• Config options removed (#410)