I am running a Nuxt app in SSR mode on a server. My sitemap can grow pretty big with over a million entries. For an older project, I followed this approach with worked fine:

My API server repo (Express app) regularly generates the list of urls and uploads the same to an S3 bucket.

My Nuxt app fetches the file from S3 bucket and dynamically creates sitemaps array during the build step. Here is how it happens

In my nuxt.config.js file, I have:

  sitemap: {
    sitemaps: [
      {
        path: '/sitemap.xml',
        routes: [],
        gzip: false
      }
    ]
  },

And also in the buildModules section:

  buildModules: [
    // Doc: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module',
    '~/modules/loadSitemap.js'
  ],

The file loadSitemap.js downloads the file from S3 bucket and for every 10k urls, creates an object like this

        const sitemap = {
          path: `/sitemap${sitemapIndex}.xml`,
          routes: urls,
          gzip: false
        }

And appends the same to this.options.sitemap.sitemaps.push(sitemap). This is working perfectly fine for an old project of mine but not working for a new project even though I am using the same versions of most of the node modules.

Is there any other recommended way of achieving this?

Hi,

I made a sitemap which contains dynamic routes of my FrontendApp + dynamic routes of my BackEnd Api

I noticed that the sitemap was generated during the build / generate of my app. Is it be possible to be generated when we request the route /sitemap.xml ? If it's not possible I would like to be able to launch a CRON every night, how can I do that?

Thank you

Hi everyone, sorry if it's a really basic question.

I am wondering if it's possible to include a stylesheet for the sitemap.xml file generated? Not too sure how to go about doing this with the generated sitemap.xml file. Thanks.

What problem does this feature solve?

Hi,

I'm using https://github.com/nuxt-community/router-module module and I add some custom routes inside router.js file. But because sitemap uses nuxt extendroutes() feature those custom routes font come into sitemap. I also can't add these manually because they are dynamic and based on static nuxt pages.

I add routes like this in loop =>
// if example-x-page does not exists create it

router.addRoutes([{
  name: `example-${pageNumber}-page`,
  path: `/example-${pageNumber}-page`,
  component: examplePage
}])

What does the proposed changes look like?

Support @nuxtjs/router module or enable to access generated .nuxt/routes.js file in routes() function.

@nuxtjs/sitemap just work for spa mode only?
I'am trying for universal mode sitemap.xml not accessible, just showing 404 page

Nico, thank you very much for your help!

I found my issue.

Incorrect code:

  sitemap: async function () {
    return {
      hostname: '',
      gzip: true,
      cacheTime: 1,
      defaults: {
        priority: 1,
        changefreq: 'daily',
        lastmod: new Date()
      },
      routes: await sitemapDynamicPagesGet()
    }
  },

Correct code:

  sitemap: {
    hostname: '',
    gzip: true,
    cacheTime: 1,
    defaults: {
      priority: 1,
      changefreq: 'daily',
      lastmod: new Date()
    },
    routes: async () => sitemapDynamicPagesGet()
  },

Just for reference (in case if someone needs it for any case), how my sitemapDynamicPagesGet() looks like:

export async function sitemapDynamicPagesGet () {
  return await Promise.all([
    function1(),
    function2()
  ])
    .then((results) => {
      const function1Data = results[0]
      const function2Data = results[1]

      const routes = []

      // Proceed function1Data and function2Data
      // ...
      xyz.forEach((data) => {
        routes.push({
          changefreq: 'daily',
          priority: 1,
          lastmod: data.editedAt,
          url: `http://example.com/${data.url}`
        })
      })

      return routes
    })
    .catch((error) => {
      console.log('sitemapDynamicPagesGet error:', error)
    })
}

Also useful example: https://sitemap.nuxtjs.org/usage/sitemap-options/#from-a-function-which-returns-a-promise

I have sitemap config like this:

  sitemap: async function () {
    return {
      hostname: '',
      cacheTime: 1000, // also tried -1
      gzip: true,
      defaults: {
        priority: 1,
        changefreq: 'daily',
        lastmod: new Date()
      },
      routes: await sitemapDynamicPagesGet()
    }
  },

sitemapDynamicPagesGet returns array like this:

[
  {
    changefreq: 'daily',
    priority: 1,
    lastmod: '2020-12-30T17:18:03.566Z'
    url: 'http://localhost:3000/tour/name123'
  },
  {
    changefreq: 'daily',
    priority: 1,
    lastmod: '2021-01-08T19:31:33.636Z'
    url: 'http://localhost:3000/tour/name456'
  }
]

lastmod and url generated based on data received from API.

When I update/re-save tour details on the server (through admin page), I refresh Last edited datetime, but when I refresh sitemap.xml page in the browser I see old/previous lastmod (which was generated/received during "npm run build" process). I have tried to change cacheTime to -1 and to 1000, but this does not help.

I have read this from https://sitemap.nuxtjs.org/usage/sitemap-options#cachetime-optional---number:

Defines how frequently sitemap routes should be updated (value in milliseconds).
Setting a negative value will disable the cache.

Please note that after each invalidation, routes will be evaluated again (see routes declaration section).

and I understand it like in case of "cacheTime: 1000" the function "await sitemapDynamicPagesGet()" must be called, but it is not, so it looks like I do not understand what the cacheTime does/how it works.

What is the way to refresh/update lastmod? Is there a way to run "await sitemapDynamicPagesGet()" every X hours or on each sitemap.xml load in order to keep lastmod up to date?

Thanks a lot.

What problem does this feature solve?

I'm generating the sitemap like the below code.

export default {
  sitemaps: [
    // ...other routes

    {
      path: '/sitemap-users.xml',
      exclude: ['/**'],
      routes() {
        return axios.get('/api/sitemap-users').then(({ data }) => {
          return data.map(user => `/${user.display_name}`)
        })
      }
    },
  ]
}

But my app has about 100k users, so I want to divide sitemap-users.xml into the specified size. (e.g. sitemap-users-1.xml sitemap-users-2.xml)

Not sure if this is the right place, just wanted to notify that the website https://sitemap.nuxtjs.org/ is currently not available and shows Not found

Hi, I'm currently experiencing some issues with Google Search Console marking my Nuxt JS pages as "Duplicate, submitted URL not selected as canonical".

At first, I thought it might've been related to the Nuxt JS content module, but upon further investigation it appears to be many pages. I've used Nuxt JS many times and launched many sites with it, but this is the first site launched that uses the sitemap module and content module.

Rather than me duplicating everything I've mentioned, please review the screenshots and discussion here -> https://github.com/nuxt/content/issues/674 and let me know your thoughts

The project I'm working on is a website that has several stores, and each store has multiple products

I want to create:

1. a basic /sitemap.xml for static routes (about us, privacy policy, etc..)
2. sitemap index(es) to generate a sitemap for each store. The website contains a lot of stores, so here I need something like
   /sitemap_index.xml then /sitemap_index-2.xml and so on
3. sitemap for each store to list urls of its products /:store/sitemap.xml which surprisingly won't need to be paginated due to some limits we apply to product quantities for stores

Now 1 and 3 were easily doable, but for 2, I had to fetch all stores in the system into one sitemap index, which I suppose is not desirable.

Here's my configuration:

sitemap: getSitemapConfig();

function getSitemapConfig() {
  const stores = await getStores({ limit: 8000 });

  return [
    {
      path: '/sitemap.xml',
      i18n: true,
    },
    {
      path: 'sitemap_index.xml',
      sitemaps: stores.map(store => ({
        path: `/${store.name}/sitemap.xml`,
        exclude: ['/**'],
        routes: async () => {
          const { products } = await getProducts();
          return products.map(product => `/${store.name}/${product.sku}`);
        },
      })),
    },
  ];
}

Is there any possible way to achieve such paginated indexes? Thank you lots.

Version

2.4.0

Reproduction link

https://example.com/

Steps to reproduce

See attached nuxt.config.js as I suspect something might be wrong here?

require('dotenv').config();
import axios from 'axios'
import getRoutes from './utils/getRoutes'

export default {
  /*
  ** Nuxt rendering mode
  ** See https://nuxtjs.org/api/configuration-mode
  */
  mode: 'universal',
  /*
  ** Nuxt target
  ** See https://nuxtjs.org/api/configuration-target
  */
  target: 'static',
  /*
  ** Env variables
  */
  env: {
    BASE_URL: process.env.BASE_URL || "https://domain-monitor.io",
    API_URL: process.env.API_URL || "http://127.0.0.1:8000",
    ONESIGNAL_PUSH_APP_ID: process.env.ONESIGNAL_PUSH_APP_ID || "",
    ONESIGNAL_SAFARI_WEB_ID: process.env.ONESIGNAL_SAFARI_WEB_ID || "",
    GA_ID: process.env.GA_ID || ""
  },
  /*
  ** Headers of the page
  ** See https://nuxtjs.org/api/configuration-head
  */
  head: {
    title: 'Domain Monitor',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'og:title', name: 'og:title', content: 'Domain Monitor' },
      { hid: 'description', name: 'description', content: 'Keep track of your expiring domains today for FREE with our FREE domain monitoring product.' },
      { hid: 'og:description', name: 'og:description', content: 'Keep track of your expiring domains today for FREE with our FREE domain monitoring product.' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Roboto:[email protected];400;700&display=swap' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' }
    ]
  },
  /*
  ** Global CSS
  */
  css: [
    '@/assets/scss/domain-monitor.scss'
  ],
  /*
  ** Bootstrap Vue
  */
  bootstrapVue: {
    bootstrapCSS: false,
    bootstrapVueCSS: false
  },
  /*
  ** Plugins to load before mounting the App
  ** https://nuxtjs.org/guide/plugins
  */
  plugins: [
    { mode: 'client', src: '@/plugins/bootstrap-vue-icons' },
    { mode: 'client', src: '@/plugins/vue-axios' },
    { mode: 'client', src: '@/plugins/vee-validate' },
    { mode: 'client', src: '@/plugins/vue-moment' },
    { mode: 'client', src: '@/plugins/content-images' },
    { mode: 'client', src: '@/plugins/content-videos' }
  ],
  /*
  ** Auto import components
  ** See https://nuxtjs.org/api/configuration-components
  */
  components: true,
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
    ['@nuxtjs/google-analytics', {
      id: process.env.GA_ID
    }]
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
    'bootstrap-vue/nuxt',
    '@nuxtjs/axios',
    '@nuxtjs/auth',
    '@nuxtjs/onesignal',
    '@nuxtjs/pwa',
    '@nuxt/content',
    '@nuxtjs/sitemap',
    ['@nuxtjs/component-cache', { maxAge: 1000 * 60 * 5 }] // 5 minutes
  ],
  /*
  ** Auth config
  */
  auth: {
    redirect: {
      login: '/account/login',
      logout: '/account/login',
      callback: '/account/login',
      home: '/account/domains'
    },
    strategies: {
      local: {
        login: { url: 'auth/login', method: 'post', propertyName: 'token' },
        logout: { url: 'account/logout', method: 'post' },
        user: { url: 'auth/user', method: 'get', propertyName: 'user' }
      }
    }
  },
  /*
  ** One Signal
  */
  oneSignal: {
    init: {
      appId: process.env.ONESIGNAL_PUSH_APP_ID,
      safari_web_id: process.env.ONESIGNAL_SAFARI_WEB_ID,
      allowLocalhostAsSecureOrigin: true,
      welcomeNotification: {
          disable: true
      }
    }
  },
  /*
  ** Axios module configuration
  ** See https://axios.nuxtjs.org/options
  */
  axios: {
    baseURL: process.env.API_URL
  },
  /*
  ** Build configuration
  ** See https://nuxtjs.org/api/configuration-build/
  */
  build: {
    extractCSS: true,

    extend (config, ctx) {
      const vueLoader = config.module.rules.find((rule) => rule.loader === 'vue-loader')
      vueLoader.options.transformAssetUrls = {
        video: ['src', 'poster'],
        source: 'src',
        img: 'src',
        image: 'xlink:href',
        'b-img': 'src',
        'b-img-lazy': ['src', 'blank-src'],
        'b-card': 'img-src',
        'b-card-img': 'img-src',
        'b-card-img-lazy': ['src', 'blank-src'],
        'b-carousel-slide': 'img-src',
        'b-embed': 'src'
      }
    }
  },
  /*
  ** Sitemap configuration
  ** See https://www.npmjs.com/package/@nuxtjs/sitemap#setup
  */
  sitemap: {
    hostname: process.env.BASE_URL, // https://www.yoursite.com
    exclude: [
      '/account/recovery',
      '/account/reset',
      '/account/profile',
      '/account/domains/add',
      '/account/domains',
      '/account/monitors/add',
      '/account/monitors',
      '/help/account/introduction',
      '/help/monitors/introduction',
      '/help/domains/introduction'
    ],
    routes() {
      return getRoutes();
    },
  }
}

The contents of my getRoutes() function is…

export default async () => {
  const { $content } = require("@nuxt/content");
  const files = await $content({ deep: true }).only(["path"]).fetch();

  return files.map((file) => (file.path === "/index" ? "/" : file.path));
};

What is expected ?

URLs shouldn't show up in the generated sitemap.

What is actually happening?

The following URLs are still showing up in my sitemap:

- https://domain-monitor.io/help/account/introduction
- https://domain-monitor.io/help/monitors/introduction
- https://domain-monitor.io/help/domains/introduction

My URLs which I've excluded from my sitemap are still displaying even after generating the site multiple times and allowing a few hours for any potential caches to be purged.

Additional comments?

None

i had format my lastmod.but it's still shown the UTC time

What I'm trying to do is to call the end-point to get data to the site-map but the end-point is dynamic so I want to access the '@nuxt/axios' module and that only happens inside the context object

Hi, I want to make the request for the sitemaps routes with Apollo instead of with Axios. What would be the right way to do it?

I tried the same way than I do in the Vuex Store, but it doesn't seem to work (I get: Cannot read property 'apolloProvider' of undefined )

Here's my relevant part of nuxt.config.js

import gql from 'graphql-tag'

module.exports = {

sitemap: {
    path: '/sitemap.xml',
    hostname: 'https://example.com/',
    generate: true,
    cacheTime: 86400,
    trailingSlash: true,
    routes: async ({ app }) => {
        const myRoutes = ['/one-random-path/']
        let client = app.apolloProvider.defaultClient
        let myProductsQuery = gql`query {
              products {
                slug
              }
            }`
          let myBrandsQuery = gql`query {
              brands {
                slug
              }
            }`
          const myProducts = await client.query({ query: myProductsQuery })
          const myBrands = await client.query({ query: myBrandsQuery })

          return [myRoutes, ...myProducts, ...myBrands]
        }
    }
}

Hi there,
I am building approximately 70 full (50k records) sitemaps asynchronously, with paths created from db records.

Is there a way to cache these sitemaps so that they dont have to be rebuilt each time I deploy?
If they are built and created on the first build, if I comment out the code that generates them for the subsequent build, will they be removed or not?

Maybe this could be a solution?

I dont know if caching is the correct term here, Im not very experienced.

Thank you

Sitemap is working fine, only issue is I cant figure out how to remove the base from showing up when the sitemap displays.

router: {
base: "/juno"

}

I would like to remove /juno/ from the url in in the loc element

eg. <loc>http://192.168.0.101:8080/juno/swarovski</loc>

Hi,

I've using a sitemap index to create multiple sitemaps. One for my Nuxt site, and one for a subdomain which houses a podcast. My configuration looks like this:

sitemap: {
    path: '/sitemap.xml',
    hostname: 'https://website.com',
    lastmod: new Date(),
    sitemaps: [
      {
        defaults: {
          changefreq: 'daily',
          priority: 0.8,
          lastmod: new Date(),
        },
        path: '/sitemap-www.xml',
        routes: [
          {
            url: '/',
            priority: 1,
          },
        ],
        gzip: true,
      },
      {
        defaults: {
          changefreq: 'daily',
          priority: 0.5,
          lastmod: new Date(),
        },
        hostname: 'https://podcast.website.com',
        path: '/sitemap-podcast.xml',
        routes: ['/route/to/podcast'],
        exclude: ['/**'],
        gzip: true,
      },
    ],
  },

This generates nearly everything fine, aside from one issue in my sitemap.xml file where it is using the hostname https://podcast.website.com as the reference to me sitemap-podcast.xml file, as opposed to route level domain which is `https://website.com.

For example, the module is generating the following in my sitemap.xml:

<loc>https://podcast.website.com/sitemap-podcast.xml.gz</loc>

Is there an option for it to generate the following in sitemap.xml, but preserve the subdomain in the sitemap-podcast.xml file itself?

<loc>https://website.com/sitemap-podcast.xml.gz</loc>

Thanks in advance.