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 Nuxt Content v3

In Nuxt Content v3 we need to use the asOgImageCollection() function to augment any collections to be able to use the ogImage frontmatter key.

import { defineCollection, defineContentConfig } from '@nuxt/content'
import { asOgImageCollection } from 'nuxt-og-image/content'

export default defineContentConfig({
  collections: {
    content: defineCollection(
      asOgImageCollection({
        type: 'page',
        source: '**/*.md',
      }),
    ),
  },
})

To ensure the tags actually gets rendered you need to ensure you're using the defineOgImage() composable with the ogImage key.

<script setup lang="ts">
import { queryCollection, useRoute } from '#imports'

const route = useRoute()
const { data: page } = await useAsyncData(`page-${route.path}`, () => {
  return queryCollection('content').path(route.path).first()
})
if (page.value?.ogImage) {
  defineOgImage(page.value.ogImage)
}
</script>

Setup Nuxt Content v2

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

Content head

The v2 Content integration 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>

Usage

The frontmatter key has the same options as defineOgImage(). 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

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