Generating XML Sitemaps in Vue.js 3 applications

Provide a Vue.js 3 server-side code snippet to generate an XML sitemap dynamically for better search engine indexing.

const fs = require('fs');
const path = require('path');
const { createServer } = require('vite');

// Function to generate XML sitemap
async function generateSitemap() {
  // Start a Vite server in the background (for SSR)
  const server = await createServer({
    // Vite server config
  });
  await server.listen();

  // Fetch all routes you want to include
  const routes = ['/home', '/about', '/contact']; // Replace with your routes

  // Define the base URL of your site
  const baseUrl = 'https://www.yourwebsite.com';

  // Generate XML content
  const sitemapContent = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  ${routes.map((route) => `
    <url>
      <loc>${baseUrl}${route}</loc>
    </url>
  `).join('')}
</urlset>`;

  // Write the XML sitemap to a file
  fs.writeFileSync(path.resolve(__dirname, 'sitemap.xml'), sitemapContent);

  // Close the Vite server
  await server.close();
}

generateSitemap().catch((e) => console.error(e));

This snippet of code demonstrates how to generate a sitemap in a Vue.js 3 server-side environment using Vite as a build tool. It imports the necessary modules, starts a Vite server, lists the routes that will be included in the sitemap, defines the base URL, generates the sitemap in XML format, writes it to a file named 'sitemap.xml', and then closes the server.