---
title: "Install Nuxt OG Image"
description: "Get started with Nuxt OG Image by installing the dependency to your project."
canonical_url: "https://nuxtseo.com/docs/og-image/getting-started/installation"
last_updated: "2026-05-07T23:26:15.036Z"
---

## Setup Module

Want to know why you might need this module? Check out the [introduction](/docs/og-image/getting-started/introduction).

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

<code-group>

```bash [pnpm]
pnpm add -D nuxt-og-image
```

```bash [yarn]
yarn add -D nuxt-og-image
```

```bash [npm]
npm install -D nuxt-og-image
```

</code-group>

<tip>

Generate an Agent Skill for this package using [skilld](https://github.com/harlan-zw/skilld):

```bash
npx skilld add nuxt-og-image
```

</tip>

Then add it to your `nuxt.config.ts`:

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

The module bundles Inter (400 and 700) by default. For custom fonts, see the [Custom Fonts](/docs/og-image/guides/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](https://devtools.nuxt.com/) 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.

<site-config-quick-setup>



</site-config-quick-setup>

## Install a Renderer

Use the CLI to install renderer dependencies:

```bash
# 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.

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

All renderers support [Tailwind CSS](https://tailwindcss.com), [UnoCSS](https://unocss.dev), CSS variables, Nuxt UI v3 colors, custom fonts, emoji, and edge runtimes. See the [Renderers](/docs/og-image/renderers) overview for details.

## Next Steps

Scaffold your first OG image component:

```bash
npx nuxt-og-image create
```

This creates a starter template in `components/OgImage/`, auto-detecting your CSS framework and renderer. See the [CLI guide](/docs/og-image/guides/cli) for all available commands.

Follow the [Getting Familiar with Nuxt OG Image](/docs/og-image/getting-started/getting-familiar-with-nuxt-og-image) tutorial to learn more.