Skip to content

fix: Update dependency nuxt-og-image to v6#14

Open
renovate[bot] wants to merge 1 commit intomainfrom
renovate/major-major-prod-dependencies
Open

fix: Update dependency nuxt-og-image to v6#14
renovate[bot] wants to merge 1 commit intomainfrom
renovate/major-major-prod-dependencies

Conversation

@renovate
Copy link
Contributor

@renovate renovate bot commented Mar 12, 2026 •
edited
Loading

This PR contains the following updates:

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

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 - At any time (no schedule defined), Automerge - At any time (no schedule defined).

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

♻ Rebasing: Whenever PR becomes conflicted, 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.

@renovate renovate bot force-pushed the renovate/major-major-prod-dependencies branch from c01fa20 to 89bbcea Compare March 13, 2026 09:57
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

dependencies major

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

0 participants