Sitemap

A sitemap file is useful for helping Google to better index your website, ensuring that the content you write can be visible on search results.


This can be created utilising the sitemap library, so you'll need to install that which can be done like so:

yarn add --dev 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 websites 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:

server/routes/sitemap.xml.ts
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:

nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'export default defineNuxtConfig({  // ...  nitro: {    prerender: {      routes: ['/sitemap.xml']    }  }})