Adding a sitemap to a VueJS application

Asked 20/7, 2021 at 20:6 Answered 30/5, 2023 at 15:37

vue.js vuejs2 vue-router sitemap xml-sitemap

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?

Anglicanism answered 20/7, 2021 at 20:6 Comment(0)

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/.

Cytochemistry answered 23/11, 2021 at 3:16 Comment(1)

thanks, @Cytochemistry is there a way to get all the paths from the vue-router file in the vue.config file? I don't want to add all paths manually. – Twentytwo 5/9 at 14:43

I added this function to my vue app, now I can generate the sitemap on the console by calling sitemap().

window.sitemap = function () {
  const routes = router
    .getRoutes()
    .map(r => r.path)
    .filter(r => !r.includes(':')) // removes routes with params
    .map(r => `<url><loc>https://mysite${r}</loc></url>`)
  console.log(`
    <?xml version='1.0' encoding='UTF-8'?>
    <urlset xmlns='http://www.sitemaps.org/schemas/sitemap/0.9'>
        ${routes.join('\n')}
    </urlset>
  `)
}

Galyak answered 30/5, 2023 at 15:37 Comment(0)

Recommended topics

Hot tags