OG Image
Api

Nuxt Config

The Nuxt OG Image module configuration.

enabled

  • Type: boolean
  • Default: true
  • Required: false

Conditionally toggle the module.

defaults

  • Type: OgImageOptions
  • Default: { width: 1200, height: 600, emojis: 'noto', renderer: 'satori', component: 'NuxtSeo', cacheMaxAgeSeconds: 60 * 60 * 24 * 3 }
  • Required: false

The default options to use when generating images.

See the defineOgImage documentation for more details.

compatibility

  • Type: { dev?: CompatibilityFlags, runtime?: CompatibilityFlags, prerender?: CompatibilityFlags }
  • Default: {}
  • Required: false

Override the compatibility flags.

See the compatibility guide to learn more.

fonts

  • Type: InputFontConfig[]
  • Default: ['Inter:400', 'Inter:700']
  • Required: false

Fonts families to use when generating images with Satori. When not using Inter it will automatically fetch the font from Google Fonts.

See the Custom Fonts documentation for more details.

zeroConfig

  • Type: boolean
  • Default: false

Enable zero runtime mode. See the Zero Runtime documentation for more details.

googleFontMirror

  • Type: boolean | string
  • Default: false
  • Required: false

Use a Google Font mirror to load fonts. If you're in China or the Google APIs are blocked for you for some reason, you can opt-in to the Google Font Mirror.

When set to true it will use the fonts.font.im proxy. If you need an alternative host, you can provide a string instead.

satoriOptions

  • Type: SatoriOptions
  • Default: {}
  • Required: false

Options to pass to Satori when generating images. See the Satori docs.

resvgOptions

  • Type: ResvgOptions
  • Default: {}
  • Required: false

Options to pass to Resvg when generating images. See the Resvg docs.

sharpOptions

  • Type: SharpOptions
  • Default: {}
  • Required: false

Options to pass to Sharp when generating images. See the Sharp docs.

componentOptions

  • Type: { global: boolean }
  • Default: {}
  • Required: false

The options to pass to when registering the <OgImage />, <OgImageScreenshot /> components.

componentDirs

  • Type: string[]
  • Default: ['OgImage', 'OgImageTemplate']
  • Required: false

Extra component directories that should be used to resolve components.

runtimeCacheStorage

  • Type: boolean | (Record<string, any> & { driver: string })
  • Default: true
  • Required: false

Modify the cache behaviour.

Passing a boolean will enable or disable the runtime cache with the default options.

Providing a record will allow you to configure the runtime cache fully.

export default defineNuxtConfig({
  ogImage: {
    runtimeCacheStorage: {
      driver: 'redis',
      host: 'localhost',
      port: 6379,
      password: 'password'
    }
  }
})

strictNuxtContentPaths

  • Type: boolean
  • Default: false

Whether the paths within nuxt/content match their real paths. This is useful when you're using the nuxt/content module without documentDriven mode.

debug

  • Type: boolean
  • Default: false
  • Required: false

Enables debug logs and a debug endpoint.