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 enable Nuxt DevTools, the module always enables the playground
• 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 the Browser renderer at runtime please see the Browser docs for more information.

Nuxt Hooks

Remove any usages of the og-image:prerenderScreenshots hook, as the module removed it.

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 Runtime Cache 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 module removed the following components:

• OgImageStatic
• OgImageDynamic
• OgImageCached
• OgImageWithoutCache

If you need to use components, 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 module removed the following composables:

• 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 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,
})