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

If you're not using documentDriven mode and all of your content paths are the same as their real paths, you can enable strictNuxtContentPaths to get the same behaviour.

export default defineNuxtConfig({
  ogImage: {
    strictNuxtContentPaths: true
  }
})

Additionally, you will need to make sure you're using the useContentHead composable if you're not using Document Driven mode.

<script setup>
const page = await useAsyncData(`docs-${route.path}`, () => queryContent(route.path).findOne())
useContentHead(page)
</script>

If you have issues with your ogImage data not updating, you may need to clear the .nuxt/content-cache folder.

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"}