### v5 URL Format Example

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/6.migration-guide/v6.md

Example of the v5 URL format for OG Image.

```text
/_og/d/satori/og.png?width=1200&title=Hello%20World
```

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

### Multiple Renderers Per Component Example

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/6.migration-guide/v6.md

Example of creating renderer-specific variants of the same component.

```bash
components/OgImage/
  MyTemplate.satori.vue    # Satori version
  MyTemplate.takumi.vue    # Takumi version (faster)
```

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

### Theme Customizations Example

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/6.migration-guide/v6.md

Example of using custom theme values like colors and fonts in OG image templates.

```css
@import "tailwindcss";

@theme {
  --color-brand: #ff6600;
  --font-heading: "Inter", sans-serif;
}
```

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

### v6 URL Format Example

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/6.migration-guide/v6.md

Example of the v6 URL format for OG Image, showing Cloudinary-style encoding.

```text
/_og/s/w_1200,title_Hello+World,p_Ii9zYXRvcmki.png
```

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

### Install Renderer Dependencies - Satori

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/6.migration-guide/v6.md

Install Satori renderer dependencies for Node.js or Edge runtimes.

```bash
# Node.js
npm i satori @resvg/resvg-js

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

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

### Theme Customizations Usage Example

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/6.migration-guide/v6.md

Example of applying theme customizations within an OG image Satori component.

```vue
<template>
  <div class="bg-brand font-heading">
    Works!
  </div>
</template>
```

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

### Install Renderer Dependencies - Browser

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/6.migration-guide/v6.md

Install Playwright Core dependency for browser-based rendering.

```bash
npm i playwright-core
```

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

### Install Renderer Dependencies - Takumi

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/6.migration-guide/v6.md

Install Takumi renderer dependencies for Node.js or Edge runtimes.

```bash
# Node.js
npm i @takumi-rs/core

# Edge runtimes
npm i @takumi-rs/wasm
```

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

### Install @nuxt/fonts

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/6.migration-guide/v6.md

Command to install the @nuxt/fonts module.

```bash
npx nuxi module add @nuxt/fonts
```

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

### Hash Mode URL Example

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/6.migration-guide/v6.md

Example of a hash mode URL used for long URLs during prerendering.

```text
/_og/s/o_1whacq.png
```

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

### Component Renderer Suffix Example

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/6.migration-guide/v6.md

Illustrates the required renderer suffix in OG Image component filenames.

```bash
# Before (no longer works)
components/OgImage/MyTemplate.vue

# After
components/OgImage/MyTemplate.satori.vue   # for Satori renderer
components/OgImage/MyTemplate.takumi.vue   # for Takumi renderer
components/OgImage/MyTemplate.browser.vue  # for Browser renderer
```

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

### Install OG Image Renderer

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/0.getting-started/1.installation.md

Installs a renderer for Nuxt OG Image. Takumi is recommended for speed and CSS support. Satori uses SVG, and Browser uses screenshots for full CSS support (prerender only). The `--edge` flag can be used for edge runtimes.

```bash
npx nuxt-og-image enable takumi
```

```bash
npx nuxt-og-image enable satori
```

```bash
npx nuxt-og-image enable browser
```

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

### Install Satori Renderer Dependencies

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/7.releases/2.v6.md

Install the required Satori renderer packages for your runtime environment (Node.js or Edge).

```bash
# Node.js
npm i satori @resvg/resvg-js
# Edge runtimes
npm i satori @resvg/resvg-wasm
```

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

### Run the migration CLI

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/6.migration-guide/v6.md

Automates most migration changes by renaming components and migrating API calls.

```bash
# Rename components and migrate API calls
npx nuxt-og-image migrate v6

# Preview changes without applying (dry run)
npx nuxt-og-image migrate v6 --dry-run
```

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

### Updating Chromium Renderer Configuration

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/6.migration-guide/v6.md

Example of updating the configuration for the renamed `chromium` renderer to `browser`.

```diff
export default defineNuxtConfig({
  ogImage: {
    compatibility: {
      runtime: {
-       chromium: 'playwright',
+       browser: 'playwright',
      }
    }
  }
})
```

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

### Renaming Chromium Renderer to Browser

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/6.migration-guide/v6.md

Example of renaming component files from `.chromium.vue` to `.browser.vue`.

```bash
# Rename component files
mv MyTemplate.chromium.vue MyTemplate.browser.vue
```

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

### Install Takumi Renderer Dependencies

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/7.releases/2.v6.md

Install the necessary Takumi renderer packages based on your runtime environment (Node.js or Edge).

```bash
# Node.js
npm i @takumi-rs/core
# Edge runtimes
npm i @takumi-rs/wasm
```

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

### Update Import Path for Legacy Alias

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/6.migration-guide/v6.md

Example of updating import paths from the removed '#nuxt-og-image-utils' alias.

```diff
- import { ... } from '#nuxt-og-image-utils'
+ import { ... } from '#og-image/shared'
```

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

### Install Browser Rendering Dependency

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/3.guides/2.cloudflare.md

Add the puppeteer package required for runtime screenshots on Cloudflare.

```bash
pnpm add @cloudflare/puppeteer
```

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

### Enable renderer dependencies

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/3.guides/12.cli.md

Install the necessary dependencies for a specific renderer, with optional support for edge runtimes.

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

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

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

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

### Enable Renderer Dependencies

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/3.guides/12.cli.md

Install dependencies for a specific OG image renderer.

```APIDOC
## `enable`

Install dependencies for a specific renderer.

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

### Options

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

### Examples

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

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

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

### Nuxt UI v3 Color Support Usage Example

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/6.migration-guide/v6.md

Example of applying Nuxt UI v3 semantic colors within an OG image Satori component.

```vue
<template>
  <div class="bg-primary-500 text-secondary-200">
    Nuxt UI colors!
  </div>
</template>
```

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

### Update Import Path for useOgImageRuntimeConfig

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/6.migration-guide/v6.md

Example of updating the import path for `useOgImageRuntimeConfig` after the stub export was removed.

```diff
- import { useOgImageRuntimeConfig } from '#og-image/shared'
+ import { useOgImageRuntimeConfig } from '#og-image/app/utils'
```

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

### Install Takumi Renderer for Node.js and Edge Runtimes

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/2.renderers/1.takumi.md

Installs the Takumi renderer core package for Node.js environments or the WASM package for edge runtimes like Cloudflare and Vercel Edge. Supports installation via pnpm, yarn, and npm.

```pnpm
pnpm i -D @takumi-rs/core
pnpm i -D @takumi-rs/wasm
```

```yarn
yarn add -D @takumi-rs/core
yarn add -D @takumi-rs/wasm
```

```npm
npm install -D @takumi-rs/core
npm install -D @takumi-rs/wasm
```

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

### Nuxt UI v3 Color Support Example

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/6.migration-guide/v6.md

Example of how Nuxt UI v3 semantic colors are resolved and used in OG image templates.

```ts
export default defineAppConfig({
  ui: {
    colors: {
      primary: 'indigo',
      secondary: 'violet'
    }
  }
})
```

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

### Install @nuxt/fonts Module

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/3.guides/5.custom-fonts.md

Installs the @nuxt/fonts module using npx. This is a prerequisite for managing custom fonts.

```bash
npx nuxi module add @nuxt/fonts
```

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

### Using defineOgImage in Page Components

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/6.migration-guide/v6.md

Example of using `defineOgImage()` in page components after Nuxt Content v2 support was removed.

```typescript
// pages/[...slug].vue
defineOgImage('NuxtSeo', { title: 'My Page' })
```

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

### Install Sharp Dependency for JPEGs

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/3.guides/3.jpegs.md

Installs the 'sharp' package, which is required to enable JPEG image generation for Nuxt OG Image. This is a heavy dependency and is only needed if you intend to use JPEGs.

```pnpm
pnpm i -D sharp
```

```yarn
yarn add -D sharp
```

```npm
npm install -D sharp
```

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

### Cache Version Control Configuration

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/6.migration-guide/v6.md

Example of how to configure the `cacheVersion` option in `nuxt.config.ts`.

```typescript
export default defineNuxtConfig({
  ogImage: {
    // Default: module version (cache invalidates on upgrade)
    cacheVersion: false // disable versioning entirely
  }
})
```

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

### Install Playwright Core for Browser Renderer

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/2.renderers/3.browser.md

Installs the `playwright-core` dependency required for the Browser renderer. This is necessary for using a real browser to take screenshots, ensuring full CSS support.

```sh
pnpm i -D playwright-core
```

```bash
yarn add -D playwright-core
```

```bash
npm install -D playwright-core
```

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

### Updating Browser Node Binding Configuration

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/6.migration-guide/v6.md

Example of updating the deprecated `browser: 'node'` compatibility option to `browser: 'playwright'`.

```diff
export default defineNuxtConfig({
  ogImage: {
    compatibility: {
      runtime: {
-       browser: 'node',
+       browser: 'playwright',
      }
    }
  }
})
```

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

### Install Nuxt OG Image Module

Source: https://github.com/nuxt-modules/og-image/blob/main/README.md

Use the Nuxt CLI to add the og-image module to your project dependencies.

```bash
npx nuxi@latest module add og-image
```

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

### Component Migration: OgImage and OgImageScreenshot

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/6.migration-guide/v6.md

Shows the migration from using `<OgImage>` and `<OgImageScreenshot>` components to their respective composables.

```diff
- <template>
-   <OgImage />
- </template>

+ <script setup>
defineOgImage()
+</script>
```

```diff
- <template>
-   <OgImageScreenshot />
- </template>

+ <script setup>
defineOgImageScreenshot()
+</script>
```

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

### Install Nuxt OG Image Dependency

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/0.getting-started/1.installation.md

Installs the nuxt-og-image package as a development dependency using different package managers.

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

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

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

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

### Using defineOgImage for Hardcoded References

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/6.migration-guide/v6.md

Example of how to update hardcoded OG image references to use `defineOgImage()` which returns generated paths.

```typescript
const [ogImageUrl] = defineOgImage('NuxtSeo', { title: 'About Us' })
```

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

### Basic Tailwind CSS Example

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/3.guides/7.styling.md

An example of using Tailwind CSS classes directly in an OG Image component.

```html
<div class="bg-blue-500 text-white p-12 flex flex-col items-center justify-center">
  <h1 class="text-6xl font-bold shadow-xl">Hello World</h1>
</div>
```

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

### Install Emoji Iconify Package

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/3.guides/6.emojis.md

Install the Iconify package for a specific emoji family to enable local emoji support, which speeds up rendering by avoiding network requests. The module automatically uses local icons when available.

```bash
pnpm add -D @iconify-json/noto
```

```bash
pnpm add -D @iconify-json/twemoji
```

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

### Object Syntax with url Replaced by useSeoMeta

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/6.migration-guide/v6.md

Illustrates the change from `defineOgImage()` with `url` to `useSeoMeta()` for pre-prepared images.

```diff
- defineOgImage({ url: '/my-image.png', width: 1200, height: 600, alt: 'My Image' })
+ useSeoMeta({ ogImage: '/my-image.png', ogImageWidth: 1200, ogImageHeight: 600, ogImageAlt: 'My Image' })
```

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

### Component Options Config Removal

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/6.migration-guide/v6.md

Demonstrates the removal of the `ogImage.componentOptions` configuration.

```diff
export default defineNuxtConfig({
  ogImage: {
-   componentOptions: { global: true },
  }
})
```

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

### Define OG Image with defineOgImage

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/0.getting-started/5.getting-familiar-with-nuxt-og-image.md

Initializes an OG image on a page using the server-only composable. This example uses the NuxtSeo Takumi template.

```vue
<script lang="ts" setup>
defineOgImage('NuxtSeo.takumi')
</script>
```

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

### Takumi Renderer Vue Component Example

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/2.renderers/1.takumi.md

A Vue component example demonstrating how to use the Takumi renderer for OG image generation. The component utilizes Tailwind CSS classes for styling and accepts 'title' and 'description' props.

```vue
<script setup lang="ts">
defineProps({
  title: String,
  description: String
})
</script>

<template>
  <div class="w-full h-full flex flex-col items-center justify-center bg-gradient-to-br from-gray-900 to-blue-900 text-white p-12">
    <h1 class="text-6xl font-bold mb-4 shadow-lg">
      {{ title }}
    </h1>
    <p v-if="description" class="text-2xl text-gray-400">
      {{ description }}
    </p>
  </div>
</template>
```

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

### Satori Renderer Configuration

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/2.renderers/0.index.md

Use the Satori renderer for efficient image generation with good CSS support. Ensure 'satori' and '@resvg/resvg-js' are installed as peer dependencies.

```bash
components/OgImage/MyTemplate.satori.vue
```

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

### Configure Prerendering for Zero Runtime

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/3.guides/1.zero-runtime.md

When using zero runtime for OG images, ensure all pages that utilize OG images are prerendered. This example shows how to configure `nitro.prerender` to crawl links and specify routes for prerendering.

```typescript
export default defineNuxtConfig({
  nitro: {
    prerender: {
      crawlLinks: true,
      routes: [
        '/',
        // ...
      ],
    },
  }
})
```

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

### Switch OG Image Renderer

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/3.guides/12.cli.md

Migrate OG image components from one renderer to another. This command renames file suffixes, installs the target renderer's dependencies, and removes the old renderer's dependencies.

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

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

### Options

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

### Examples

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

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

### Eject Community Template

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/6.migration-guide/v6.md

Commands to list and eject community OG Image templates.

```bash
# List available templates
npx nuxt-og-image list

# Eject a specific template
npx nuxt-og-image eject NuxtSeo
```

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

### URL Path Encoding

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/3.guides/3.runtime-cache.md

Example of OG image URL encoding options in the URL path.

```http
/_og/d/w_1200,h_600,c_NuxtSeo,title_Hello+World.png
```

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

### Cloudflare Browser Rendering Configuration

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/6.migration-guide/v6.md

Configuration for using Cloudflare Browser Rendering for runtime screenshots.

```typescript
export default defineNuxtConfig({
  ogImage: {
    browser: {
      provider: 'cloudflare',
      binding: 'BROWSER'
    }
  }
})
```

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

### Inline Styles

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/3.guides/7.styling.md

Example of using the `:style` binding for dynamic values that change based on props.

```html
<template>
  <div :style="{ backgroundColor: themeColor }" class="w-full h-full flex items-center justify-center">
    <h1 style="color: white; font-size: 80px;">
      {{ title }}
    </h1>
  </div>
</template>
```

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

### Display CLI help

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/3.guides/12.cli.md

View available commands and options for the nuxt-og-image CLI.

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

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

### Scaffold First OG Image Component

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/0.getting-started/1.installation.md

Creates a starter template for an OG image component in the components/OgImage/ directory, automatically detecting the CSS framework and renderer.

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

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

### Define OG Image using Frontmatter Data (Vue)

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/4.integrations/1.content.md

A Vue script setup that fetches content data and conditionally calls defineOgImage based on the 'ogImage' frontmatter properties. It supports component-based generation and passing props.

```vue
<script setup lang="ts">
import { queryCollection, useRoute } from '#imports'

const route = useRoute()
const { data: page } = await useAsyncData(`page-${route.path}`, () => {
  return queryCollection('content').path(route.path).first()
})
if (page.value?.ogImage?.component) {
  defineOgImage(page.value.ogImage.component, page.value.ogImage.props)
}
</script>
```

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

### Build and Deploy to Cloudflare

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/3.guides/2.cloudflare.md

Use the standard build command followed by the wrangler deploy command to ensure the ASSETS binding is correctly utilized.

```bash
nuxt build
npx wrangler --cwd .output deploy
```

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

### Migrate to v6

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/3.guides/12.cli.md

Automate the migration process from v5 to v6.

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

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

### Removing strictNuxtContentPaths Configuration

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/6.migration-guide/v6.md

Example of removing the deprecated `strictNuxtContentPaths` option from `nuxt.config.ts`.

```diff
export default defineNuxtConfig({
  ogImage: {
-   strictNuxtContentPaths: true,
  }
})
```

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

### Configure OG Image via Frontmatter (Markdown)

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/4.integrations/1.content.md

Demonstrates how to configure OG Image settings within the frontmatter of a Markdown file. Supports specifying a custom component, props for that component, or a direct image URL.

```markdown
---
ogImage:
  component: BlogOgImage
  props:
    image: /blog/3-months-of-europe.png
    readingMins: 5
---

```

```markdown
---
ogImage:
  url: /blog/3-months-of-europe.png
---

```

```markdown
---
ogImage:
  component: PageScreenshot
---

```

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

### Scaffold OG image components

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/3.guides/12.cli.md

Create a new OG image component with a starter template. The command auto-detects the CSS framework and infers the renderer.

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

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

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

### List community templates

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/3.guides/12.cli.md

View all available community-provided templates.

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

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

### Create KV Namespace

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/3.guides/2.cloudflare.md

Initialize a new Cloudflare KV namespace for persistent OG image caching.

```bash
npx wrangler kv namespace create OG_IMAGE_CACHE
```

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

### Migrate renderers

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/3.guides/12.cli.md

Switch OG image components between renderers, handling file renaming and dependency updates.

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

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

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

### Nuxt OG Image CLI Overview

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/3.guides/12.cli.md

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

```APIDOC
## CLI Overview

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

### Usage
```bash
npx nuxt-og-image --help
```
```

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

### Create OG Image Component

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/3.guides/12.cli.md

Scaffold a new OG image component with a starter template. The command auto-detects your CSS framework and generates an appropriate template.

```APIDOC
## `create`

Scaffold a new OG image component with a starter template.

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

### Description
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()`{lang="ts"} into a page file.

### Options

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

### Examples

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

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

### NuxtHub

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/3.guides/3.runtime-cache.md

Auto-detected when @nuxthub/core is installed with KV enabled.

```typescript
// Auto-detected when @nuxthub/core is installed with KV enabled
export default defineNuxtConfig({
  modules: ['@nuxthub/core', 'nuxt-og-image'],
  hub: { kv: true }
})
```

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

### Verify ASSETS Binding

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/3.guides/2.cloudflare.md

Check the deployment output to confirm the worker has access to the ASSETS binding.

```text
Your Worker has access to the following bindings:
Binding            Resource
env.ASSETS         Assets
```

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

### defineOgImageComponent Deprecated

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/6.migration-guide/v6.md

Shows the deprecation of `defineOgImageComponent` and its replacement with `defineOgImage`.

```diff
- defineOgImageComponent('NuxtSeo', { title: 'Hello' })
+ defineOgImage('NuxtSeo', { title: 'Hello' })
```

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

### Configure OG Image via Route Rules

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/3.guides/2.route-rules.md

Demonstrates how to use the ogImage key within the routeRules configuration to apply specific props, such as icons, to a subset of routes.

```typescript
export default defineNuxtConfig({
  routeRules: {
    '/og-image/**': {
      ogImage: {
        props: { icon: 'carbon:image-search' }
      }
    }
  }
})
```

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

### Simple Usage

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/4.api/0.define-og-image.md

Example of using defineOgImage() with a component name and props.

```typescript
defineOgImage('NuxtSeo', { title: 'Hello World' })
```

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

### Usage with Options

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/4.api/0.define-og-image.md

Example of using defineOgImage() with a component name, props, and additional options.

```typescript
defineOgImage('MyTemplate', { title: 'Hello' }, { cacheMaxAgeSeconds: 3600 })
```

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

### Use Takumi Renderer

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/2.renderers/0.index.md

To use the Takumi renderer, ensure your component file is named with the .takumi.vue suffix.

```bash
components/OgImage/MyTemplate.takumi.vue
```

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

### Font Configuration Migration

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/6.migration-guide/v6.md

Compares the old `ogImage.fonts` configuration with the new approach using `@nuxt/fonts`.

```diff
// Before
export default defineNuxtConfig({
  ogImage: {
-   fonts: ['Inter:400', 'Inter:700']
  }
})

// After (Inter only) — remove the config, it works by default

// After (custom fonts) — just install @nuxt/fonts
export default defineNuxtConfig({
+ modules: ['@nuxt/fonts', 'nuxt-og-image'],
+ fonts: {
+   families: [
+     { name: 'Roboto', weights: [400, 700], global: true }
+   ]
+ }
})
```

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

### Nuxt Config - Component Options

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/7.releases/5.v3.md

How to globally enable Nuxt Content components for OG Images.

```APIDOC
## Nuxt Config - Component Options

### Description
Configure Nuxt Content components to be globally available for OG Image generation.

### Method
Nuxt Configuration

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
- **ogImage.componentOptions.global** (boolean) - Optional - Set to `true` to make `OgImage` and `OgImageScreenshot` components global.

### Request Example
```ts
export default defineNuxtConfig({
  ogImage: {
    componentOptions: {
      global: true,
    },
  },
})
```

### Response
N/A (This is a configuration setting)

#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### Using an existing image with useSeoMeta

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/4.api/0.define-og-image.md

Example of using a pre-prepared image by directly using `useSeoMeta`.

```typescript
useSeoMeta({
  ogImage: '/my-image.png',
  ogImageWidth: 1200,
  ogImageHeight: 600,
  ogImageAlt: 'My Image',
})
```

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

### Configure OG Image via Frontmatter

Source: https://github.com/nuxt-modules/og-image/blob/main/playground/content/foo.md

Define the OG Image component and its properties directly within the page frontmatter.

```yaml
path: '/custom/foo'
ogImage:
  component: 'Tailwind'
  props:
    bgColor: 'bg-yellow-100'
    title: 'Foo'
```

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

### Configure OG Image in Nuxt Content Frontmatter

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/7.releases/5.v3.md

Demonstrates how to configure OG Image settings directly within Markdown frontmatter using the ogImage key. This requires Document Driven mode or a defined path.

```markdown
---
path: /blog/3-months-of-europe
ogImage:
  component: BlogOgImage
  props:
    image: /blog/3-months-of-europe.png
    readingMins: 5
---
```

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

### CLI Command for Component Renaming

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/6.migration-guide/v6.md

CLI command to automatically rename components with the new renderer suffix.

```bash
npx nuxt-og-image migrate v6
```

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

### Disable OG Image

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/4.api/0.define-og-image.md

Example of how to disable the og:image for a specific page by passing `false` to `defineOgImage`.

```typescript
defineOgImage(false)
```

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

### Browser Renderer Configuration

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/4.api/3.config.md

Configure the browser provider for screenshots. For Cloudflare deployments, specify the browser binding name.

```APIDOC
## Browser Renderer Configuration

### Description
Configure the browser provider for screenshots. For Cloudflare deployments, specify the browser binding name.

### Method
Configuration

### Endpoint
N/A

### Parameters
#### Request Body
- **browser** (BrowserConfig) - Optional - Browser renderer configuration for screenshots.
  - **provider** (string) - Required - The browser provider (e.g., 'cloudflare').
  - **binding** (string) - Required - The browser binding name for the provider.

### Request Example
```json
{
  "browser": {
    "provider": "cloudflare",
    "binding": "BROWSER"
  }
}
```

### Response
N/A
```

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

### Use cosmetic image extensions

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/3.guides/4.resolve-og-images.md

Append an image extension to the resolver URL for compatibility with tools that require specific file suffixes.

```html
<img src="/_og/r/blog/hello-world.png">
```

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

### Return value of defineOgImage

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/4.api/0.define-og-image.md

Example showing the return value of `defineOgImage`, which is an array of generated image URLs.

```typescript
const urls = defineOgImage('NuxtSeo', { title: 'My Page' }, [
  { key: 'og' },
  { key: 'square', width: 450, height: 450 },
])
// urls = [
//   '/_og/s/title_My+Page,p_...',
//   '/_og/s/k_square,w_450,h_450,title_My+Page,p_...'
// ]
```

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

### Using OG Image Components (v2 vs v3)

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/6.migration-guide/v3.md

In v3, use the generic `<OgImage />` component instead of specific ones like `OgImageStatic`. The `defineOgImageComponent` API is recommended for defining components.

```vue
<template>
  <OgImageStatic :title="title" :description="description" />
</template>

```

```typescript
// v3
defineOgImageComponent('NuxtSeo', {
  title: '',
  description: '',
})

```

```vue
<template>
  <OgImage :title="title" :description="description" />
</template>

```

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

### Multiple OG Images

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/4.api/0.define-og-image.md

Example demonstrating how to define multiple OG images with different keys and dimensions.

```typescript
defineOgImage([
  { title: 'Default' }, // key: 'og' (default)
  { title: 'Square', key: 'square', width: 450, height: 450 },
])
```

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

### Static data-theme for Light Mode

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/3.guides/7.styling.md

Example of setting a static 'data-theme' attribute to 'light' for light mode tokens.

```vue
<template>
  <div data-theme="light" class="w-full h-full bg-default text-default p-10">
    <div class="bg-inverted text-inverted p-6 rounded-lg">
      Light mode tokens
    </div>
  </div>
</template>
```

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

### Apply Scoped Styles with CSS-Inline

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/7.releases/5.v3.md

Example of using scoped styles in a Vue component, which now works across all environments due to improved css-inline compatibility.

```vue
<template>
  <div>
    <h1 class="title" />
  </div>
</template>

<style scoped>
.title {
  color: red;
}
</style>
```

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

### Configure Browser Renderer in nuxt.config.ts

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/2.renderers/3.browser.md

Disables the Browser renderer during the prerender phase in `nuxt.config.ts`. This is useful if you want to opt-out of automatic browser binary installation for prerendering.

```ts
export default defineNuxtConfig({
  ogImage: {
    compatibility: {
      prerender: {
        browser: false
      }
    }
  }
})
```

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

### Migrate to v6

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/3.guides/12.cli.md

Automate migration from v5 to v6 of nuxt-og-image.

```APIDOC
## `migrate v6`

Automate migration from v5 to v6. See the [Migration Guide](/docs/og-image/migration-guide/v6) for details.

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

### Options

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

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

### Dynamic data-theme (per-image color mode)

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/3.guides/7.styling.md

Example of binding `:data-theme` to a prop to swap themes per OG image.

```vue
<script lang="ts" setup>
defineProps<{ colorMode?: 'light' | 'dark' }>()
</script>

<template>
  <div :data-theme="colorMode" class="w-full h-full bg-default text-default p-10">
    <div class="bg-inverted text-inverted p-6 rounded-lg">
      hello {{ colorMode }}
    </div>
  </div>
</template>
```

```vue
<script setup lang="ts">
defineOgImage('MyImage', { colorMode: 'light' })
</script>
```

```vue
<script setup lang="ts">
defineOgImage('MyImage', { colorMode: 'dark' })
</script>
```

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

### defineOgImage with HTML

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/7.releases/5.v3.md

How to provide raw HTML for OG image generation.

```APIDOC
## defineOgImage with HTML

### Description
Provide raw HTML content directly to the `defineOgImage` composable to generate OG images.

### Method
Composable

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
- **html** (string) - Required - The raw HTML content for the OG image.

### Request Example
```ts
defineOgImage({
  html: `<div class="w-full h-full text-6xl flex justify-end items-end bg-blue-500 text-white">
    <div class="mb-10 underline mr-10">hello world</div>
</div>`,
})
```

### Response
N/A (This is a configuration composable)

#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### Modify Nuxt OG Image Components

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/4.api/3.nuxt-hooks.md

Use the `nuxt-og-image:components` hook to programmatically alter the components used by the module. This example filters out community components.

```typescript
export default defineNuxtConfig({
  hooks: {
    'nuxt-og-image:components': (ctx) => {
      ctx.components = ctx.components.filter(c => c.category !== 'community')
    }
  }
})
```

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

### Migrate to Nuxt OG Image v6

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/7.releases/2.v6.md

Run this command to automatically update your project for Nuxt OG Image v6.

```bash
npx nuxt-og-image migrate v6
```

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

### Modify Nuxt OG Image Runtime Config

Source: https://github.com/nuxt-modules/og-image/blob/main/docs/content/4.api/3.nuxt-hooks.md

Use the `nuxt-og-image:runtime-config` hook to change the runtime configuration at build-time. For example, force the dark mode.

```typescript
export default defineNuxtConfig({
  hooks: {
    'nuxt-og-image:runtime-config': (config) => {
      config.colorPreference = 'dark'
    }
  }
})
```