Create a sitemap.xml for your Nuxt-website with the Umbraco Content Delivery API

A sitemap.xml is used by search engines like Google to index all your pages. This is how you can set it up for Nuxt with help of the Umbraco Delivery API.

First, install the required Nuxt-sitemap-module:

You can obviously use other package managers, please see the link above on this. I'm old-fashioned so I like to keep using npm.

Then add the module to your nuxt.config.ts:

This is already enough when you create all of your files in Nuxt. But we like to use the Umbraco backoffice for all our pages.

We would like all of our pages made in Umbraco to be added to the sitemap.xml. Therefor we need to create a new file to add all of these urls to the sitemap.

Therefor, we need to create a new file under 'server/api', and call it 'xml-sitemap.js'.

This is the code we need to use to fetch all pages:

Please note: YOURROOTURL is the url of your Umbraco Backoffice.

Then go back to your nuxt.config.ts and add in your 'export default defineNuxtConfig':

Then run 'npm run dev' and go to http://localhost:3000/sitemap.xml (or whatever you run your site on) and see all your pages indexed.

Sometimes you want to exclude some pages/nodes from your sitemap.

I've created a property called 'hideFromSitemap' on all of my pages.

If you want to hide those pages, you can update your /server/api/xml-sitemap.js to the following: