Generate a sitemap using the Nuxt 3 Content module

Generate a sitemap using the Nuxt 3 Content module

If you're using Nuxt 3 and looking to generate a sitemap for your site, you may have run into some challenges finding a solution that works. I recently encountered this issue myself and spent some time searching for a solution that would work with Nuxt 3 and the Nuxt Content module. After some trial and error, I finally found a solution that worked for me and I want to share it with you in this blog post. Additionally, I want to document it for my own reference in case I need to generate a sitemap for a Nuxt 3 site again in the future.

I tested with a fork of the @nuxt/content moduele, but the technique should also work for the original module. I'm using the fork because it has some additional features that I needed for my site. You can find the fork here: https://github.com/funkenstudio/sitemap-module-nuxt-3/tree/experimental

In nuxt.config.ts, I added the following sitemap configuration:

  import blogRoutes from './helpers/blogRoutes'

  // ...

  sitemap: {
    hostname: 'http://localhost',
    cacheTime: 1000 * 60 * 15,
    routes: blogRoutes,
    defaults: {
      changefreq: 'weekly',
      priority: 1,
      lastmod: new Date().toISOString()
    },
  },

In helpers/blogRoutes.js I added the following code to request my constructed API route:

/**
 * We can't use imports here, so instead we just fetch
 * our routes from an API endpoint that can use import.
 */
export default async () => {
  return await $fetch('/api/blog_routes', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
  })
}

And finally in api/blog_routes.js I used serverQueryContent to fetch all of my blog posts and then return an array of routes for the sitemap:

import { eventHandler } from 'h3'
import { serverQueryContent } from '#content/server'

export default eventHandler(async event => {
  const { req, res } = event
  if (req.method !== 'POST') {
    res.statusCode = 405
    res.end()
    return
  }

  // const config = useRuntimeConfig()
  const docs = await serverQueryContent(event).find()
  return docs.map(item => {
    return { url: item._path }
  })
})
a web designers face on a laptop screen

Schedule a free call -we'd love to talk about your web design project

We'll talk for around 10 minutes on phone or video about what you're looking to do. Free, no sales.

Leed's web design - transform your business

We help you imagine, create, market and evolve an effective digital presence for your business or brand. Leveraging creative technology to deliver high performance, cost effective digital marketing and design.

Leeds Local Business: Exploring ideas together →

Back to top