Nuxt Content

Introduction

Nuxt OG Image integrates with Nuxt Content out of the box, supporting a ogImage frontmatter key that can be used to configure your OG Image.

You can see a demo of this integration in the Nuxt OG Image & Nuxt Content Playground.

Setup

When strictNuxtContentPaths has been configured, images will be automatically generated for each markdown file in your content folder. To use strictNuxtContentPaths the markdown paths must match the path of the page. For example, if you have a markdown file at content/blog/3-months-of-europe.md, the path of the page must be /blog/3-months-of-europe.

Otherwise, you will need to provide the ogImage for each markdown file.

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

---
path: /blog/3-months-of-europe
ogImage: true
---

Frontmatter Configuration

The frontmatter key has the same options as defineOgImageComponent(). Providing true will use the default values, a false value will disable the OG Image for that page.

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

If you'd like to use OG Images from your public folder, you can use the ogImage.url key which will serve your image instead of generating one.

---
ogImage:
  url: /blog/3-months-of-europe.png

Content head

The module works by injecting extra tags within the content.head property of a markdown file.

To have the OG Image work it needs to render this property, if you're not using document driven then you will need to use the useContentHead() composable or the head property in your component.

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

<template>
  <ContentDoc head />
</template>

Screenshots

If you'd prefer to render just screenshots, you can use the<OgImageScreenshot /> component within your content instead of using frontmatter.

To have this work in your markdown files, you will need to make the components global.

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

:OgImageScreenshot

Troubleshooting

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