Nuxt Content

Nuxt OG Image integrates with Nuxt Content out of the box.

It supports the ogImage frontmatter key that can be used to configure your OG Image.

This will only work when you're using Document Driven mode, or you have set a path and are using the useContentHead composable.

Setup

Add the ogImage key on your frontmatter. This has the same options as defineOgImage.

---
ogImage:
  component: BlogOgImage
  props:
    image: /blog/3-months-of-europe.png
    readingMins: 5
---

If you're not using Document Driven mode, you must use the path key on your frontmatter.

---
path: /blog/3-months-of-europe
ogImage:
  component: BlogOgImage
  props:
    image: /blog/3-months-of-europe.png
    readingMins: 5
---

Using Components

If you'd like to use the <OgImage /> or <OgImageScreenshot /> components within your content instead of using frontmatter, you'll need to make the components global.

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

:OgImage{component="BlogOgImage" image="/blog/3-months-of-europe.png" readingMins="5"}