Nuxt•4mo ago

How to add blog post to sitemap.xml with Nuxt Content v3 ?

for nuxt content v2 i was uded something like this in server/routes:

import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
import { serverQueryContent } from '#content/server'
import { asSitemapUrl, defineSitemapEventHandler } from '#imports'

export default defineSitemapEventHandler(async (e) => {
    const contentList = (await serverQueryContent(e).find()) as ParsedContent[]
    // console.log(contentList)
    return contentList
        .filter((c) => c._path.startsWith('/blog') || c._path.startsWith('/page'))
        .map((c) => {
            return asSitemapUrl({
                loc: c._path,
                // lastmod: updatedAt
            })
        })
})

import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
import { serverQueryContent } from '#content/server'
import { asSitemapUrl, defineSitemapEventHandler } from '#imports'

export default defineSitemapEventHandler(async (e) => {
    const contentList = (await serverQueryContent(e).find()) as ParsedContent[]
    // console.log(contentList)
    return contentList
        .filter((c) => c._path.startsWith('/blog') || c._path.startsWith('/page'))
        .map((c) => {
            return asSitemapUrl({
                loc: c._path,
                // lastmod: updatedAt
            })
        })
})

But with Nuxt Content v3 struggeling to make it working

4 Replies

kapa.ai•4mo ago

Hi @Ress. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To add blog posts to your sitemap.xml with Nuxt Content v3, you'll need to adjust your approach slightly from what you were using in v2. The main difference is that in v3, we use collections and a different query API. Here's how you can achieve this: 1. First, make sure you have defined your blog collection in content.config.ts:

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

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

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

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

2. Then, you can create a server route to generate your sitemap. Create a file server/routes/sitemap.xml.ts:

import { serverQueryCollection } from '#content/server'
import { SitemapStream, streamToPromise } from 'sitemap'
import { defineEventHandler } from 'h3'

export default defineEventHandler(async (event) => {
  // Create a new sitemap stream
  const sitemap = new SitemapStream({ hostname: '<https://your-site.com'> })

  // Query your blog collection
  const docs = await serverQueryCollection('blog').all()

  // Add each blog post to the sitemap
  docs.forEach((doc) => {
    sitemap.write({
      url: doc.path,
      changefreq: 'monthly'
    })
  })

  sitemap.end()

  // Convert the sitemap stream to a string
  const sitemapOutput = await streamToPromise(sitemap)

  // Set the appropriate headers
  event.node.res.setHeader('Content-Type', 'application/xml')
  event.node.res.end(sitemapOutput.toString())
})

import { serverQueryCollection } from '#content/server'
import { SitemapStream, streamToPromise } from 'sitemap'
import { defineEventHandler } from 'h3'

export default defineEventHandler(async (event) => {
  // Create a new sitemap stream
  const sitemap = new SitemapStream({ hostname: '<https://your-site.com'> })

  // Query your blog collection
  const docs = await serverQueryCollection('blog').all()

  // Add each blog post to the sitemap
  docs.forEach((doc) => {
    sitemap.write({
      url: doc.path,
      changefreq: 'monthly'
    })
  })

  sitemap.end()

  // Convert the sitemap stream to a string
  const sitemapOutput = await streamToPromise(sitemap)

  // Set the appropriate headers
  event.node.res.setHeader('Content-Type', 'application/xml')
  event.node.res.end(sitemapOutput.toString())
})

3. Finally, make sure to add the sitemap to your prerender routes in your nuxt.config.ts:

export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: ['/sitemap.xml']
    }
  }
})

export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: ['/sitemap.xml']
    }
  }
})

This approach uses the new serverQueryCollection API from Nuxt Content v3 to fetch all blog posts and add them to the sitemap. The sitemap package is used to generate the XML output. Note that you'll need to install the sitemap package:

npm install sitemap

npm install sitemap

This solution should work for Nuxt Content v3. Remember to adjust the hostname in the SitemapStream constructor to match your actual website URL. Nuxt Content v3 Documentation provides more information about the new features and APIs in v3. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@328509260143001601> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

!NEXOS CREATOR•4mo ago

check out this: https://nuxt.com/modules/sitemap

Nuxt

Sitemap · Nuxt Modules

Powerfully flexible XML Sitemaps that integrate seamlessly.

RessOP•4mo ago

Yes, it's working with 'asSitemapCollection' in content.conig.ts Thanks!

Gaming

Programming

How to add blog post to sitemap.xml with Nuxt Content v3 ?

Did you find this page helpful?