---
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-07-17T03:09:53.219Z"
---

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

<note>

Already using `@nuxtjs/seo`? Do not install this again unless you want to manage the OG Image module separately. `@nuxtjs/seo` includes `nuxt-og-image`.

</note>

<module-install name="nuxt-og-image">



</module-install>

<tip>

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

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

</tip>

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

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