Install Nuxt OG Image

Setup Module

Want to know why you might need this module? Check out the introduction.

To get started with Nuxt OG Image, you need to install the dependency and add it to your Nuxt config.

npx nuxt module add nuxt-og-image

npm i nuxt-og-image

yarn add nuxt-og-image

pnpm i nuxt-og-image

bun i nuxt-og-image

Use Nuxt 4.6.1+ or Nuxt 5. Use Node 22.22.3+, 24.15.0+, or 26+.

Import app functions from #og-image/app. Import server functions from #og-image/server.

The module bundles Inter (400 and 700) by default. For custom fonts, see the Custom Fonts guide.

Verifying Installation

Out-of-the-box the module will not do anything until you configure it.

Verify the module installation by checking the Nuxt DevTools for the OG Image tab.

Without the optional nuxtseo-devtools-host package, the OG Image tab shows an install button. To use the tab, install the package as a dev dependency:

pnpm add -D nuxtseo-devtools-host@^1

Restart your development server after installation. You do not need to add it to modules.

The DevTools is the starting point, providing a playground to design and test your OG Image with full HMR support.

Configuration

OG Images must be served with absolute URLs. If you're prerendering, you will need to provide a Site URL. Without one, a prerendered og:image is a relative path, and the build logs a warning.

export default defineNuxtConfig({
  site: {
    url: 'https://example.com',
    name: 'My Awesome Website'
  },
})

NUXT_SITE_URL=https://example.com
NUXT_SITE_NAME=My Awesome Website

Install a Renderer

Use the CLI to install renderer dependencies:

# Takumi (recommended) - 2-10x faster with full CSS support
npx nuxt-og-image enable takumi

# Satori - SVG-based renderer
npx nuxt-og-image enable satori

# Browser - full CSS via screenshots (prerender only)
npx nuxt-og-image enable browser

For edge runtimes (Cloudflare, Vercel Edge), the CLI auto-detects your deployment target and installs Wasm variants. You can also pass --edge explicitly.

If a template needs a renderer that is not installed, nuxt dev in an interactive terminal asks before it installs anything. Without a prompt (CI, AI coding agents, piped stdin), the module never edits your package.json: it logs the install command instead. A production build fails when a page or route rule uses a template whose renderer is not installed. A template that nothing uses only gets a warning that names the file and the install command.

If no template exists and no renderer is installed, for example after you install @nuxtjs/seo, OG images stay off and the module logs one line with the enable command.

All renderers support Tailwind CSS, UnoCSS, CSS variables, Nuxt UI v3 colors, custom fonts, emoji, and edge runtimes. See the Renderers overview for details.

Next Steps

You've successfully installed Nuxt OG Image. Here's the recommended reading path:

1. Getting Familiar with Nuxt OG Image - Walk through building your first OG image template
2. CLI - Scaffold a starter component with npx nuxt-og-image create, auto-detecting your CSS framework and renderer
3. Renderers - Compare Takumi, Satori, and Browser