v2 to v3

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
• siteUrl - You must migrate to using Nuxt Site Config
• runtimeBrowser, runtimeSatori - These are now handled by compatibility. If you intend to use Chromium at runtime please see the Chromium docs 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.

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

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

// 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 ... />

<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

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
defineOgImage({
  title: String,
  description: String,
})

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