Library

This can be created by utilising the sitemap library, which can be installed as follows:

pnpm add sitemap

Server Route

We will be utilising the server routes available within Nuxt, and to do so you'll need to create the server/ directory within your website's root directly.

Once this is done, create a routes/ directory inside this, and add a sitemap.xml.ts file, this will translate to /sitemap.xml.

You'll need to add the following:

import { serverQueryContent } from '#content/server'
import { SitemapStream, streamToPromise } from 'sitemap'

export default defineEventHandler(async (event) => {
  // Fetch all documents
  const docs = await serverQueryContent(event).find()
  const sitemap = new SitemapStream({
    hostname: 'https://example.com'
  })

  for (const doc of docs) {
    sitemap.write({
      url: doc._path,
      changefreq: 'monthly'
    })
  }
  sitemap.end()

  return streamToPromise(sitemap)
})

Now, once users go to https://example.com/sitemap.xml, you'll find the generated XML file with all your pages.

When using nuxt generate, you may want to pre-render the sitemap since the server route won't be able to run on a static hosting.

You can do this using the nitro.prerender option in your nuxt.config:

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