CLI · Nuxt OG Image · Nuxt SEO

-
-
-
-

[1.4K](https://github.com/harlan-zw/nuxt-seo)

[Nuxt SEO on GitHub](https://github.com/harlan-zw/nuxt-seo)

**OG Image v6** is here! Looking for an older version?

.

OG Image

-
-
-
-
-
-
-
-
-
-

Search…```k`` /`

v6 (latest)

- Playgrounds
- [Discord Support](https://discord.com/invite/275MBUBvgP)

### Getting Started

-
-
-
-

### Core Concepts

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

### Overview

-
-
-
-

### Integrations

-
-
-

Core Concepts

# CLI

[Copy for LLMs](https://nuxtseo.com/docs/og-image/guides/cli.md)

The `nuxt-og-image` CLI provides commands for scaffolding components, switching renderers, managing templates, and migrating between versions.

```
npx nuxt-og-image --help
```

## [`create`](#create)

Scaffold a new OG image component with a starter template.

```
npx nuxt-og-image create [name] [--renderer <renderer>] [--path <dir>]
```

The command auto-detects your CSS framework (Tailwind CSS, [UnoCSS](https://unocss.dev), or plain CSS) and generates an appropriate template. The renderer is inferred from existing components or installed packages when `--renderer` is omitted.

After creating the component, you'll be prompted to insert `defineOgImage()` into a page file.

### [Options](#options)

| Flag | Description |
| --- | --- |
| `--renderer<renderer>` | Force a specific renderer (`satori`, `takumi`, `browser`) |
| `--path<dir>` | Custom output directory (default: `components/OgImage/`) |

### [Examples](#examples)

```
# Interactive - prompts for name and renderer
npx nuxt-og-image create

# Create a component with inferred renderer
npx nuxt-og-image create BlogPost

# Specify renderer explicitly
npx nuxt-og-image create BlogPost --renderer satori

# Custom output path
npx nuxt-og-image create BlogPost --path components/custom
```

## [`switch`](#switch)

Migrate OG image components from one renderer to another. Renames file suffixes, installs the target renderer's dependencies, and removes the old renderer's dependencies when no components remain using it.

```
npx nuxt-og-image switch [--from <renderer>] [--to <renderer>] [--dry-run] [--yes]
```

### [Options](#options-1)

| Flag | Description |
| --- | --- |
| `--from<renderer>` | Source renderer to migrate from |
| `--to<renderer>` | Target renderer to migrate to |
| `--dry-run` | Preview changes without applying them |
| `--yes` | Skip confirmation prompts (CI mode) |

### [Examples](#examples-1)

```
# Interactive - prompts for source and target
npx nuxt-og-image switch

# Migrate all satori components to takumi
npx nuxt-og-image switch --from satori --to takumi

# Preview what would change
npx nuxt-og-image switch --from satori --to takumi --dry-run

# Non-interactive (CI)
npx nuxt-og-image switch --from satori --to takumi --yes
```

## [`enable`](#enable)

Install dependencies for a specific renderer.

```
npx nuxt-og-image enable <renderer> [--edge]
```

### [Options](#options-2)

| Flag | Description |
| --- | --- |
| `--edge` | Also install Wasm variants for edge runtimes (Cloudflare, Vercel Edge) |

### [Examples](#examples-2)

```
# Install takumi dependencies
npx nuxt-og-image enable takumi

# Install satori dependencies for edge runtime
npx nuxt-og-image enable satori --edge
```

## [`list`](#list)

List available community templates.

```
npx nuxt-og-image list
```

## [`eject`](#eject)

Copy a community template into your project for customization. Community templates are only available in development; you must eject before production builds.

```
npx nuxt-og-image eject <name>
```

The template is copied to `components/OgImage/` (or `app/components/OgImage/` for Nuxt v4).

### [Examples](#examples-3)

```
npx nuxt-og-image eject NuxtSeo
npx nuxt-og-image eject BlogPost
```

## [`generate-secret`](#generate-secret)

Generate a cryptographically secure signing secret for URL tamper protection.

```
npx nuxt-og-image generate-secret
```

This generates a 64-character hex string that should be set as the `NUXT_OG_IMAGE_SECRET` environment variable. See the

 for details.

## [`migrate v6`](#migrate-v6)

... Automate migration from v5 to v6. See the

 for details.

```
npx nuxt-og-image migrate v6 [--dry-run] [--yes] [--renderer <renderer>]
```

### [Options](#options-3)

| Flag | Description |
| --- | --- |
| `--dry-run` | Preview changes without applying them |
| `--yes` | Skip confirmation prompts |
| `--renderer<renderer>` | Default renderer for components without a suffix |

[Edit this page](https://github.com/nuxt-modules/og-image/edit/main/docs/content/3.guides/12.cli.md)

[Markdown For LLMs](https://nuxtseo.com/docs/og-image/guides/cli.md)

Did this page help you?

On this page

- [create](#create)
- [switch](#switch)
- [enable](#enable)
- [list](#list)
- [eject](#eject)
- [generate-secret](#generate-secret)
- [migrate v6](#migrate-v6)

[GitHub](https://github.com/harlan-zw/nuxt-seo) [ Discord](https://discord.com/invite/275MBUBvgP)

###

-
-

Modules

-
-
-
-
-
-
-
-
-

###

-
-
-

###

Nuxt

-
-
-
-
-

Vue

-
-
-
-
-
-
-
-

###

-
-
-
-
-
-
-
-
-
-

Copyright © 2023-2026 Harlan Wilton - [MIT License](https://github.com/harlan-zw/nuxt-seo/blob/main/license) · [mdream](https://mdream.dev)