---
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-09-07T05:47:54.503Z"
---

## 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
```

## :icon{name="i-noto-rocket"} 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 [nuxt.config.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.

## :icon{name="i-noto-warning"} 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/` |

::tip
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 favor 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))

## :icon{name="i-noto-bug"} 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))