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.

pnpm add -D nuxt-og-image@beta

yarn add -D nuxt-og-image@beta

npm install -D nuxt-og-image@beta

npx skilld add nuxt-og-image

Then add it to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: [
    'nuxt-og-image',
  ],
})

Inter (400 and 700) is bundled and works out of the box. For custom fonts, see the Custom Fonts guide.

Verifying Installation

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

You can verify the module is installed correctly by checking the Nuxt DevTools for the OG Image tab.

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.

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

NUXT_SITE_URL=https://example.comNUXT_SITE_NAME=My Awesome Website

Install a Renderer

Renderer dependencies are installed separately. We recommend Takumi — it's 2-10x faster than Satori with the same feature set.

# Node.js
pnpm i -D @takumi-rs/core

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

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

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

pnpm i -D playwright-core

Running nuxi dev will prompt you to install missing dependencies automatically.

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, but you need to make your first OG Image.

Follow the Getting Familiar with Nuxt OG Image tutorial to get started.