Skip to content

chore(deps): update dependency nuxt-og-image to v6#2094

Open
renovate[bot] wants to merge 1 commit intomainfrom
renovate/nuxt-og-image-6.x
Open

chore(deps): update dependency nuxt-og-image to v6#2094
renovate[bot] wants to merge 1 commit intomainfrom
renovate/nuxt-og-image-6.x

Conversation

@renovate
Copy link
Contributor

@renovate renovate bot commented Mar 16, 2026

This PR contains the following updates:

Package Change Age Confidence
nuxt-og-image (source) 5.1.13 → 6.0.1 age confidence

Warning

Some dependencies could not be looked up. Check the Dependency Dashboard for more information.

Release Notes

nuxt-modules/og-image (nuxt-og-image)

v6.0.1

Compare Source

   🐞 Bug Fixes
    View changes on GitHub

v6.0.0

Compare Source

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
   🚀 Features
   🐞 Bug Fixes
   🏎 Performance
    View changes on GitHub

Configuration

📅 Schedule: Branch creation - "on Monday" (UTC), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

  • If you want to rebase/retry this PR, check this box

This PR was generated by Mend Renovate. View the repository job log.

@vercel
Copy link

vercel bot commented Mar 16, 2026 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
docs.npmx.dev Error Error Mar 16, 2026 9:56pm
npmx.dev Error Error Mar 16, 2026 9:56pm
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
npmx-lunaria Ignored Ignored Mar 16, 2026 9:56pm

Request Review

@codecov
Copy link

codecov bot commented Mar 16, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

@renovate renovate bot force-pushed the renovate/nuxt-og-image-6.x branch from 89ac5ed to ab77cab Compare March 16, 2026 10:09
@renovate renovate bot force-pushed the renovate/nuxt-og-image-6.x branch from ab77cab to 241d351 Compare March 16, 2026 10:16
@renovate renovate bot force-pushed the renovate/nuxt-og-image-6.x branch from 241d351 to 8acf897 Compare March 16, 2026 11:54
@renovate renovate bot force-pushed the renovate/nuxt-og-image-6.x branch from 8acf897 to cc4411e Compare March 16, 2026 11:58
@renovate renovate bot force-pushed the renovate/nuxt-og-image-6.x branch from cc4411e to 8154ffc Compare March 16, 2026 12:30
@renovate renovate bot force-pushed the renovate/nuxt-og-image-6.x branch from 8154ffc to 362b0b4 Compare March 16, 2026 12:40
@renovate renovate bot force-pushed the renovate/nuxt-og-image-6.x branch from 362b0b4 to c85d868 Compare March 16, 2026 12:48
@renovate renovate bot force-pushed the renovate/nuxt-og-image-6.x branch from c85d868 to 0c4e1f6 Compare March 16, 2026 16:43
@renovate renovate bot force-pushed the renovate/nuxt-og-image-6.x branch from 0c4e1f6 to 733ebeb Compare March 16, 2026 21:12
@renovate renovate bot force-pushed the renovate/nuxt-og-image-6.x branch from 733ebeb to 5372b02 Compare March 16, 2026 21:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

chore dependencies

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

0 participants