---
title: "v2 to v3"
description: "Migrate Nuxt OG Image v2 to Nuxt OG Image v3."
canonical_url: "https://nuxtseo.com/docs/og-image/v5/migration-guide/v3"
last_updated: "2026-05-06T23:29:43.870Z"
---

### Playground

You must access the playground through Nuxt DevTools, the `/__og_image__` is no longer supported.

### OG Image URL

If you were referencing an OG Image URL, you will need to update it to use the new `/__og-image__/image` endpoint.

## Nuxt Config

Remove the following keys from your Nuxt config:

- `playground` - If you have Nuxt DevTools enabled then the playground will always be enabled
- `host` - You must migrate to using [Nuxt Site Config](/site-config/guides/setting-site-config)
- `siteUrl` - You must migrate to using  [Nuxt Site Config](/site-config/guides/setting-site-config)
- `runtimeBrowser`, `runtimeSatori` - These are now handled by `compatibility`. If you intend to use Chromium at runtime please
see [the Chromium docs](/docs/og-image/guides/chromium) for more information.

## Nuxt Hooks

Remove any usages of the `og-image:prerenderScreenshots` hook, it has been removed.

If you were using this hook
and have a use case for it, please [open an issue](https://github.com/harlan-zw/nuxt-og-image/issues/new/choose).

If you were using `og-image:config` you should replace this code with the new `nuxt-og-image:runtime-config` hook.

## Caching

You will need to delete all old cache keys: `cacheTtl`, `cache`, `cacheKey`, `static`

Please see the [caching docs](/docs/og-image/guides/cache) for details on using the new `cacheMaxAgeSeconds`.

## Default Template

If you were referencing the default template as `Fallback` anywhere, you will need to update this to be `NuxtSeo`.

```ts [v2]
// v3
defineOgImage({
  component: 'Fallback',
  // props ...
})
```

```ts [v3]
// v3
defineOgImageComponent('NuxtSeo', {
  // props
})
```

## Components

It's now recommended to use the new `defineOgImageComponent` API over using components.

The following composables have been removed:

- `OgImageStatic`
- `OgImageDynamic`
- `OgImageCached`
- `OgImageWithoutCache`

If you need to using components then do a search for these components and replace any instances or variations with
`<OgImage ... />`

<code-group>

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

```ts [v3 - recommended]
// v3
defineOgImageComponent('NuxtSeo', {
  title: '',
  description: '',
})
```

```vue [v3 - components]
<template>
  <OgImage :title="title" :description="description" />
</template>
```

</code-group>

If you're using components with Nuxt Content, you will now need to manually make them global.

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

## Composables

The following composables were removed:

- `defineOgImageStatic`
- `defineOgImageDynamic`
- `defineOgImageCached`
- `defineOgImageWithoutCache`

Do a global search for these removed composables as well as `defineOgImage`, it's recommended to replace these with the new `defineOgImageComponent`.

The props work a little bit differently, you will need to pass them in explicitly as a second argument.

If you were using the default template previously, you should use the `NuxtSeo` as the template name. This will provide type-safety.

<code-group>

```ts [v2]
// v2
defineOgImage({
  title: String,
  description: String,
})
```

```ts [v3]
// v3
defineOgImageComponent('NuxtSeo', {
  title: String,
  description: String,
})
```

</code-group>