'Adding a sitemap to a VueJS application

I'm using VueJS without using Vue CLI. I would like to add a sitemap.xml to my router but I'm struggling to understand how to use the vue-router-sitemap library.

I've tried using the code mentioned but it doesn't specify where it should be added.

import VueRouterSitemap      from 'vue-router-sitemap';
import path                  from 'path';
import { router }            from 'router';

...
export const sitemapMiddleware = () => {
  return (req, res) => {
    res.set('Content-Type', 'application/xml');

    const staticSitemap = path.resolve('dist/static', 'sitemap.xml');
    const filterConfig = {
      isValid: false,
      rules: [
        /\/example-page/,
        /\*/,
      ],
    };

    new VueRouterSitemap(router).filterPaths(filterConfig).build('http://example.com').save(staticSitemap);

    return res.sendFile(staticSitemap);
  };
};

app.get('/sitemap.xml', sitemapMiddleware());

If I add this file anywhere then the app variable doesn't exist (as I would expect). I'm assuming this has to be placed somewhere in particular.

I can't find any other examples of how to do this and other questions about this library have remained unanswered on reddit or stackoverflow.

What is the correct method of adding a sitemap.xml to a VueJS project?

vue.jsvuejs2vue-routersitemapxml-sitemap


Solution 1:[1]

I don't know about vue-router-sitemap, but you could try using sitemap-webpack-plugin. For this you need to:

Install the plugin

npm install sitemap-webpack-plugin --save-dev

The next part you can add to your vue.config.js file. The documentation says to add it to the webpack.config.js file, but if you're using vue.js you should put it in the vue.config.js, which sits at the root of your project. If it's not there, you can just create it. The code:

const SitemapPlugin = require('sitemap-webpack-plugin').default
// You can write the paths as an array of strings or an array of objects
const paths = [
  {
      path: '/',
      lastmod: '2021-11-22',
      priority: 1.0,
      changefreq: 'yearly'
  },
  {
      path: '/about/',
      lastmod: '2021-11-22',
      priority: 0.9,
      changefreq: 'yearly'
  }
]

module.exports = {
    configureWebpack: {
        plugins: [
            new SitemapPlugin({ base: 'https://example.com', paths })
        ]
    },
    // Other exports here
}

Then when you run the build command, e.g. npm run build, the sitemap.xml should get generated and sit in your dist folder.

You can read more about how to use it here: https://github.com/schneidmaster/sitemap-webpack-plugin

Then... This part isn't necessary to generate the sitemap, but if you're doing this to get your site ready for SEO then I would recommend also using the vue-meta module to include meta tags etc. in the HTML <head> tag of your site. Read more about that here: https://www.digitalocean.com/community/tutorials/vuejs-vue-meta. Additionally, if you're not rendering the pages server-side, then I would suggest using prerender.io to generate populated HTML content for your routes and send it to the bot (e.g. googlebot) that's crawling your site. Otherwise, the bots will just crawl an empty HTML page. Read more about that here: https://prerender.io/how-to-install-prerender/.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions