Nuxt sitemap adds unwanted spaces in the tags URL during the dynamic sitemap.xml generatation for Nuxt content website

Question

I have a Nuxt content based application for which I have added the Nuxt sitemap dependency. Everything works fine and can generate the sitemap.xml file during the npm run generate or nuxt generate command. But facing a small issue when generating the URLs for the tags in the .md markdown files in /content/index.md files.

I have also created the sample project on CodeSandBox for the reproduction. As you can observe in the Sitemap.xml there are various URLs with spaces after localhost:3000/tags. How to fix this?

I have a few tags in my .md files; if the tags have spaces, then the spaces are retained in the generated URL within the sitemap.xml file. Can you please let me know how to fix this?

I have a Nuxt content website with some of the markdown files in /content/index.md with tags such as:

  navigation:
  linkTitle: "Introduction"
  tags : ["Testing tools", "performance tests", "process automation", "supply chain management", "load tests"]
    

I am generating the sitemap.xml using the nuxtjs/sitemap with ssr:true during the generation of the sitemap it generates the URL with spaces http://localhost:3000/tags/performance tests. Since it generates the URL with spaces they are invalid but URLs are valid when I navigate to them then they are present with spaces:

 <url>
    <loc>http://localhost:3000/tags/performance tests</loc>
    <xhtml:link rel="alternate" href="http://localhost:3000/tags/performance tests" hreflang="x-default" />
    <xhtml:link rel="alternate" href="http://localhost:3000/tags/performance tests" hreflang="en" />
</url>

How to ensure the sitemap adds appropriate spaces and checks for valid URLs before generating the sitemap.xml using Nuxt Sitemap and replacing the spaces with URL-safe characters.

http://localhost:3000/tags/performance%20tests

Following is my complete nuxt.config.js file for the project:

Complete nuxt.config.js file

export default {
  modules: [
    "@nuxtjs/tailwindcss",
    "unplugin-fonts/nuxt",
    "@nuxtjs/i18n",
    "@nuxtjs/color-mode",
    "@nuxt/image",
    "@nuxt/content",
    "@nuxtjs/sitemap",
  ],

  site: {
    url: process.env.NUXT_PUBLIC_SITE_URL || 'http://localhost:3000/',
    name: "Test Application"
  },

  compatibilityDate: "2024-07-10",


  //To support and display the .md files from /content using @nuxt/content
  content: {
    // To highlight the code sections using the theme
    highlight: {
      theme: {
        default: "aurora-x",
        dark: "everforest-dark",
        sepia: "monokai",
      },
      langs: ["json", "xml", "java", "shell"],
    },
    
    markdown: {
      remarkPlugins: ["remark-reading-time"], //To get the reading time for each .md file in /content
      anchorLinks: false, // Do not underline and highlight the h2, h3, h4 etc
    }
  },

  ssr: true,

  app: {
    head: {
      link: [
        {
          rel: "icon",
          type: "image/x-icon",
          href: `/img/favicon.ico`,
        },
      ],
    },
  },

  buildModules: [
    {
      vue: {
        config: {
          assetDirs: ["assets", "public"],
        },
      },
    },
  ],

  runtimeConfig: {
    apiSecret: "123",
    public: {},
  },

  components: [
    {
      path: "~/components",
      pathPrefix: false,
    },
  ],

  build: {
    postcss: {
      postcssOptions: {
        plugins: {
          tailwindcss: {},
          autoprefixer: {},
        },
      },
    },
  },

  i18n: {
    locales: [
      {
        code: "en",
        files: ["en.json", "en-extended.json"],
      },
    ],
    lazy: true,
    langDir: "./locales",
    defaultLocale: "en",
  },
};

How to avoid adding the spaces during the URL creation for the tags? Is there a way to replace the spaces?