v6.0.0

Introduction

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

The headline change is Takumi as the recommended renderer - a Rust-based renderer that's 2-10x faster than Satori. Alongside this, v6 brings first-class CSS support, redesigned DevTools, opt-in dependencies, and smarter caching.

See the full migration guide for upgrade instructions.

Quick migration:

npx nuxt-og-image migrate v6

Features

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. (#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.

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

components/OgImage/MyTemplate.takumi.vue

First-Class CSS Support

Nuxt OG Image now has first-class support for multiple CSS approaches with zero configuration. See the styling guide for details. (#430)

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

Multiple OG Images Per Page

Define multiple images with different dimensions for different platforms. See the WhatsApp guide for a common use case. (#305)

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

@nuxt/fonts Integration

Custom fonts now use @nuxt/fonts instead of the legacy ogImage.fonts config. See the custom fonts guide. (#432)

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

You must set global: true for fonts to be available in OG image rendering.

Redesigned DevTools

The OG image DevTools have been overhauled with better image preview, more accessible interface, and improved error reporting. Bluesky social cards are now supported.

Breaking Changes

Component Renderer Suffix Required

OG Image components now require a renderer suffix in their filename. This enables automatic renderer detection and tree-shaking. (#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. (#426)

npx nuxt-og-image eject NuxtSeo

Templates continue to work in development without ejecting.

Install Renderer Dependencies

Renderer dependencies are no longer bundled - install only what you need. Running nuxi dev will prompt you to install missing dependencies automatically. See the installation guide for details. (#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

@nuxt/fonts Required for Custom Fonts

v6 removes the legacy ogImage.fonts config. Use @nuxt/fonts with global: true for custom fonts. (#432)

New URL Structure

OG Image URLs now use a Cloudinary-style format with options encoded in the path, enabling better CDN caching. (#305)

Other Breaking Changes

• defineOgImageComponent deprecated in favor of defineOgImage (#433)
• UnoCSS runtime removed - UnoCSS is now resolved at build time (#430)
• Nuxt Content v2 support removed, several legacy config options removed (#410)
• Cache key format changed for better CDN compatibility. See the Runtime Cache guide (#427)

Bug Fixes

• Improved HMR for OG image templates (055eadf9)
• Auto-eject components in dev (265cad56)
• Exclude default options from URLs (#431)
• Always fallback to emoji fetching in edge runtimes (#429)
• Avoid crashing main thread with resvg errors (7b5b1af8)
• Support local fonts with zero runtime mode (#428)
• Support error.vue navigation (d22ede31)
• Dynamic runtime cache storage (#425)
• Force social platform cache invalidation between builds (#423)
• Encoding bug for array text children in Satori (#422)
• Flakey image rendering (#421)
• Light-weight emoji resolves (bbeeea16)