Whilst launching my new site (https://jackwhiting.co.uk) - I chose to use Nuxt Content for managing my blog posts, works, and any other content. Whilst generating the sitemap I noticed that any content created from @nuxt/content was not being added to my sitemap and needed a fix for that. In this article, we are going to look at how to solve this and get all of your entries listed.

Setup

Before we can do anything we need to make sure we have the [@nuxtjs/sitemap](https://www.npmjs.com/package/@nuxtjs/sitemap) module installed. Open up your project in the terminal and run the following.

yarn add @nuxtjs/sitemap

In your nuxt.config.js add the sitemap to your modules.

export default {
  modules: ['@nuxt/content', '@nuxtjs/sitemap']
}

This should always go after any other modules you’ve included to ensure all routes are caught.

Next, add some defaults for the sitemap configuration — add a hostname and set up an empty function which we will use later to fetch and return the paths of our content.

export default {
  sitemap: {
    hostname: process.env.BASE_URL || 'YOURSITEURL',
    routes: async () => {}
  }
}

For a full list of sitemap options, you can check out the readme.

Adding Your Routes

The way you have set up your content structure may be unique, you may use unique URLs, you may have multiple folders or only want to include one folder. Each of these may change how you need to define your routes, so I have included a few examples below which should let you get set up and run.

Adding Routes From One Directory

routes: async () => {
  const { $content } = require('@nuxt/content')

  const posts = await $content('posts')
    .only(['path'])
    .fetch()

  return posts.map((p) => p.path)
}

#nuxt #vue #nuxtjs #sitemap #javascript