--- title: "v6.0.0" description: "Release notes for Nuxt OG Image v6." canonical_url: "https://nuxtseo.com/docs/og-image/releases/v6" last_updated: "2026-05-07T21:17:58.076Z" --- ## Introduction Nuxt OG Image v6 is a complete overhaul focused on **performance**, **modern tooling**, and **developer experience**. The headline change is [Takumi](/docs/og-image/renderers/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](/docs/og-image/migration-guide/v6) for upgrade instructions. ### Quick Migration ```bash npx nuxt-og-image migrate v6 ``` ## Features ### Takumi Renderer (Recommended) [Takumi](/docs/og-image/renderers/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](https://github.com/nuxt-modules/og-image/pull/414)) Takumi and Satori are feature-compatible within Nuxt OG Image - both support [Tailwind CSS](https://tailwindcss.com), custom fonts, emoji, edge runtimes, and all the same template features. Use Takumi by creating components with the `.takumi.vue` suffix: ```bash 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](/docs/og-image/guides/styling) for details. ([#430](https://github.com/nuxt-modules/og-image/pull/430)) - **Tailwind v4**: build-time class extraction with Tailwind's CSS engine, `@theme` values work - **UnoCSS**: full [UnoCSS](https://unocss.dev) 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](/docs/og-image/guides/whatsapp) for a common use case. ([#305](https://github.com/nuxt-modules/og-image/pull/305)) ```ts 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](https://fonts.nuxt.com) instead of the legacy `ogImage.fonts` config. See the [custom fonts guide](/docs/og-image/guides/custom-fonts). ([#432](https://github.com/nuxt-modules/og-image/pull/432)) ```ts 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](https://github.com/nuxt-modules/og-image/pull/433)) ```bash # Before components/OgImage/MyTemplate.vue # After components/OgImage/MyTemplate.takumi.vue # Recommended components/OgImage/MyTemplate.satori.vue ``` Run the migration CLI to rename automatically: ```bash npx nuxt-og-image migrate v6 ``` ### Community Templates Must Be Ejected [Community templates](/docs/og-image/guides/community-templates) (`NuxtSeo`, `SimpleBlog`, etc.) are no longer bundled in production. Eject them to your project before building. ([#426](https://github.com/nuxt-modules/og-image/pull/426)) ```bash 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](/docs/og-image/getting-started/installation) for details. ([#415](https://github.com/nuxt-modules/og-image/pull/415)) **Takumi (recommended):** ```bash npm i @takumi-rs/core # Node.js npm i @takumi-rs/wasm # Edge runtimes ``` **Satori:** ```bash 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](https://fonts.nuxt.com) with `global: true` for [custom fonts](/docs/og-image/guides/custom-fonts). ([#432](https://github.com/nuxt-modules/og-image/pull/432)) ### New URL Structure OG Image URLs now use a Cloudinary-style format with options encoded in the path, enabling better CDN caching. ([#305](https://github.com/nuxt-modules/og-image/pull/305))
v5 v6
/__og-image__/image/ /_og/d/
/__og-image__/static/ /_og/s/
Runtime URLs can become long when passing many props. For best results, pass minimal props (like a slug) and fetch data inside your OG component. Prerendered images automatically use short hash URLs. See the [Performance](/docs/og-image/guides/performance) guide. ### Other Breaking Changes - `defineOgImageComponent` deprecated in favour of [`defineOgImage`](/docs/og-image/api/define-og-image) ([#433](https://github.com/nuxt-modules/og-image/pull/433)) - UnoCSS runtime removed - UnoCSS is now resolved at build time ([#430](https://github.com/nuxt-modules/og-image/pull/430)) - Nuxt Content v2 support removed, several legacy config options removed ([#410](https://github.com/nuxt-modules/og-image/pull/410)) - Cache key format changed for better CDN compatibility. See the [Runtime Cache guide](/docs/og-image/guides/runtime-cache) ([#427](https://github.com/nuxt-modules/og-image/pull/427)) ## Bug Fixes - Improved HMR for OG image templates ([`055eadf9`](https://github.com/nuxt-modules/og-image/commit/055eadf9)) - Auto-eject components in dev ([`265cad56`](https://github.com/nuxt-modules/og-image/commit/265cad56)) - Exclude default options from URLs ([#431](https://github.com/nuxt-modules/og-image/pull/431)) - Always fallback to emoji fetching in edge runtimes ([#429](https://github.com/nuxt-modules/og-image/pull/429)) - Avoid crashing main thread with resvg errors ([`7b5b1af8`](https://github.com/nuxt-modules/og-image/commit/7b5b1af8)) - Support local fonts with [zero runtime](/docs/og-image/guides/zero-runtime) mode ([#428](https://github.com/nuxt-modules/og-image/pull/428)) - Support `error.vue` navigation ([`d22ede31`](https://github.com/nuxt-modules/og-image/commit/d22ede31)) - Dynamic runtime cache storage ([#425](https://github.com/nuxt-modules/og-image/pull/425)) - Force social platform cache invalidation between builds ([#423](https://github.com/nuxt-modules/og-image/pull/423)) - Encoding bug for array text children in Satori ([#422](https://github.com/nuxt-modules/og-image/pull/422)) - Flakey image rendering ([#421](https://github.com/nuxt-modules/og-image/pull/421)) - Light-weight emoji resolves ([`bbeeea16`](https://github.com/nuxt-modules/og-image/commit/bbeeea16))