CLI

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

npx nuxt-og-image --help

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, 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

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

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

Examples

# 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

Install dependencies for a specific renderer.

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

Options

Examples

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

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

list

List available community templates.

npx nuxt-og-image list

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) as <name>.<renderer>.vue. When a template has more than one variant, the CLI picks the renderer your app uses: first the suffix of your existing templates, then the renderer in package.json, then Takumi. Add .takumi or .satori to the name to choose the variant yourself.

Examples

npx nuxt-og-image eject NuxtSeo
npx nuxt-og-image eject NuxtSeo.takumi
npx nuxt-og-image eject BlogPost

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_APP_SECRET environment variable. See the Security Guide for details.

migrate v6

Automate migration from v5 to v6. See the Migration Guide for details.

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

Options