Dynamic Sitemap Generation in a Vue.js Application

Your task is to create a dynamic sitemap generator for a Vue.js application. A sitemap is crucial for SEO, helping search engines discover and index your web pages. In this challenge, you'll implement a system that can generate a sitemap based on your application's routes and dynamic content.

Problem Description

You need to build a Vue.js component or service that can programmatically generate an XML sitemap. This sitemap should include all the static routes defined in your Vue Router, as well as dynamically generated URLs based on data fetched from an API. The generated sitemap should adhere to the sitemap protocol standards.

Key Requirements:

1. Static Route Inclusion: Automatically include all routes defined in your Vue Router's configuration.
2. Dynamic Route Generation: Fetch data from a simulated API and generate URLs for each item in the fetched data (e.g., product pages, blog posts).
3. XML Format: Output the sitemap in a valid XML format that conforms to the sitemap protocol.
4. URL Attributes: Each URL in the sitemap should include loc, lastmod, changefreq, and priority attributes.
5. Vue Integration: The solution should be integrated within a Vue.js application context.

Expected Behavior:

When triggered (e.g., by a button click or on component mount), the generator should produce an XML string representing the sitemap. This string can then be displayed to the user or used for other purposes (like saving to a file or serving via an API endpoint).

Edge Cases to Consider:

• Routes with parameters (e.g., /products/:id).
• Handling empty API responses.
• Ensuring correct date formatting for lastmod.
• Valid XML escaping for special characters in URLs (though less common for typical route URLs).

Examples

Example 1:

Input:
- Vue Router configuration with static routes:
  - `/`
  - `/about`
  - `/contact`
- Simulated API endpoint returning:
  `[{ id: 1, name: "Awesome Product", updatedAt: "2023-10-27T10:00:00Z" }, { id: 2, name: "Another Item", updatedAt: "2023-10-26T15:30:00Z" }]`
- Dynamic route pattern: `/products/:id`

Output:
```xml
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>http://localhost:8080/</loc>
    <lastmod>2023-10-27T10:00:00Z</lastmod>
    <changefreq>daily</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>http://localhost:8080/about</loc>
    <lastmod>2023-10-27T10:00:00Z</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>http://localhost:8080/contact</loc>
    <lastmod>2023-10-27T10:00:00Z</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.7</priority>
  </url>
  <url>
    <loc>http://localhost:8080/products/1</loc>
    <lastmod>2023-10-27T10:00:00Z</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.9</priority>
  </url>
  <url>
    <loc>http://localhost:8080/products/2</loc>
    <lastmod>2023-10-26T15:30:00Z</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.9</priority>
  </url>
</urlset>

Explanation: The sitemap includes static routes /, /about, /contact, and dynamically generated routes /products/1 and /products/2 based on the API data. The lastmod for static routes is a default, while dynamic routes use their updatedAt property. Default changefreq and priority are applied.

Example 2:

Input:
- Vue Router configuration with static routes:
  - `/dashboard`
- Simulated API endpoint returning an empty array: `[]`
- Dynamic route pattern: `/items/:slug`

Output:
```xml
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>http://localhost:8080/dashboard</loc>
    <lastmod>2023-10-27T10:00:00Z</lastmod>
    <changefreq>daily</changefreq>
    <priority>1.0</priority>
  </url>
</urlset>

Explanation: The sitemap only contains the static route /dashboard because the API returned no data for dynamic route generation.

Constraints

• The application will use vue-router for routing.
• The simulated API will return JSON data. You can mock this API response for testing purposes.
• The generated sitemap should be a single XML string.
• lastmod dates should be in ISO 8601 format.
• The base URL for the sitemap should be configurable (e.g., http://localhost:8080 for development).

Notes

• Consider how you will map dynamic data attributes (like updatedAt) to the lastmod attribute.
• Think about how to define the changefreq and priority for different types of routes. You might want to have default values and overrides.
• For generating the XML, you can use string concatenation or a dedicated XML builder library if available and deemed necessary.
• You'll need to simulate fetching data from an API. A simple setTimeout with a hardcoded array can suffice for this challenge.
• The challenge focuses on the generation of the sitemap XML, not on how to serve it in a production environment (e.g., via a server-side route or a static file).