v2 to v3 · 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)

You're viewing **OG Image v5** documentation. For the latest,

.

OG Image

-
-
-
-
-
-
-
-
-
-

Search…```k`` /`

v5

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

### Changelog

### Migration Guides

-

### Releases

-
-
-
-

Migration Guides

# v2 to v3

[Copy for LLMs](https://nuxtseo.com/docs/og-image/v5/migration-guide/v3.md)

### [Playground](#playground)

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

### [OG Image URL](#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](#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
- `siteUrl` - You must migrate to using
- `runtimeBrowser`, `runtimeSatori` - These are now handled by `compatibility`. If you intend to use Chromium at runtime please see for more information.

## [Nuxt Hooks](#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](#caching)

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

Please see the

 for details on using the new `cacheMaxAgeSeconds`.

## [Default Template](#default-template)

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

v2

```
// v3
defineOgImage({
  component: 'Fallback',
  // props ...
})
```

v3

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

## [Components](#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 ... />`

v2

v3 - recommended

v3 - components

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

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

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

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

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

## [Composables](#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.

v2

v3

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

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

[Edit this page](https://github.com/nuxt-modules/og-image/blob/v5.1.13/docs/content/6.migration-guide/v3.md)

[Markdown For LLMs](https://nuxtseo.com/docs/og-image/v5/migration-guide/v3.md)

Did this page help you?

On this page

- [Playground](#playground)
- [OG Image URL](#og-image-url)
- [Nuxt Config](#nuxt-config)
- [Nuxt Hooks](#nuxt-hooks)
- [Caching](#caching)
- [Default Template](#default-template)
- [Components](#components)
- [Composables](#composables)

[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)