feat: Nuxt Content v3

[harlan-zw]

🔗 Linked issue

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Bumps all modules with Nuxt Content v3 support.

Setup Nuxt Content v3

In Nuxt Content v3 we need to use the asSeoCollection(){lang="ts"} function to augment any collections
to be able to use the SEO frontmatter keys: ogImage, schemaOrg, robots and sitemap.

import { defineCollection, defineContentConfig } from '@nuxt/content'
import { asSeoCollection } from '@nuxtjs/seo/content'

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

To ensure the tags get rendered you need to set up logic to handle the added tags.

<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) // <-- Nuxt OG Image
}
// Ensure the schema.org is rendered
useHead(page.value.head || {})  // <-- Nuxt Schema.org
useSeoMeta(page.value.seo || {}) // <-- Nuxt Robots
</script>

Due to current Nuxt Content v3 limitations, you must load the Nuxt SEO module before the content module.

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/seo',
    '@nuxt/content' // <-- Must be after @nuxtjs/seo
  ]
})

Usage

For the full options available for each module, please see the individual module documentation.

---
ogImage:
  component: HelloWorld
  props:
    title: "Hello World"
    description: "This is a description"
    image: "/hello-world.png"
sitemap:
  lastmod: 2025-01-01
robots: index, nofollow
schemaOrg:
  - "@type": "BlogPosting"
    headline: "How to Use Our Product"
    author:
      type: "Person"
      name: "Jane Smith"
    datePublished: "2023-10-01"
---

# Hello World

[cloudflare-workers-and-pages]

Deploying nuxt-seo with    Cloudflare Pages

Latest commit:	e37fc43
Status:	🚫  Build failed.

View logs