Satori Renderer

Nuxt OG Image uses Satori as the default renderer. It converts Vue components to SVG, then rasterizes to PNG.

Installation

# Node.js
pnpm i -D satori @resvg/resvg-js

# Edge runtimes (Cloudflare, Vercel Edge, etc.)
pnpm i -D satori @resvg/resvg-wasm

# Node.js
yarn add -D satori @resvg/resvg-js

# Edge runtimes (Cloudflare, Vercel Edge, etc.)
yarn add -D satori @resvg/resvg-wasm

# Node.js
npm install -D satori @resvg/resvg-js

# Edge runtimes (Cloudflare, Vercel Edge, etc.)
npm install -D satori @resvg/resvg-wasm

Usage

It's not necessary to manually define the renderer as satori unless you changed the default.

export default defineNuxtConfig({
  // this is not necessary as satori is already the default
  ogImage: {
    defaults: {
      renderer: 'satori'
    }
  }
})

defineOgImageComponent('MyOgImage', {
  renderer: 'satori' // only when the default has been changed
})

Pros

• Fast rendering
• Works on all environments including edge runtimes
• Good CSS support (flexbox, fonts, colors, gradients)
• 6 emoji families supported
• Google Fonts integration

Cons

• Some CSS limitations (see below)
• Requires learning Satori's constraints

Limitations

It's important to familiarize yourself with Satori before you make more complex templates.

If you find Satori too difficult to work with, you can use Takumi for simpler templates or Chromium for full CSS support.

To learn more about the limitations and working around them, see:

• Styling
• Icons and Images