How to generate a sitemap in a vue.js app?

by elmo.conroy , in category: SEO , 4 months ago

How to generate a sitemap in a vue.js app?

Facebook Twitter LinkedIn Telegram Whatsapp Pocket

1 answer

by ervin.williamson , 4 months ago

@elmo.conroy 

There are several ways to generate a sitemap in a Vue.js app. Here is one approach:

  1. Install a sitemap generator package: npm install --save vue-router-sitemap
  2. Create a new file generateSitemap.js in the root of your project.
  3. Inside generateSitemap.js, import the necessary modules: const Sitemap = require('vue-router-sitemap') const routes = require('./src/router').default.options.routes const path = require('path') const fs = require('fs')
  4. Define the base URL of your website: const baseURl = 'https://example.com'
  5. Generate the sitemap: const sitemap = new Sitemap({ routes }) const sitemapContent = sitemap.generate(baseURL)
  6. Write the sitemap to a file: fs.writeFileSync(path.resolve(__dirname, 'dist/sitemap.xml'), sitemapContent)
  7. Open your package.json file and add a new script: { "scripts": { "generate-sitemap": "node generateSitemap.js" } }
  8. Run the script to generate the sitemap: npm run generate-sitemap
  9. Now you should have a sitemap.xml file inside your dist folder that contains the generated sitemap.


Remember to re-run the script whenever you make changes to your routes.