Nuxt•3w ago

Generate SiteMap with api and Nuxt/sitemap

Hello I have an api that gives objects containing various company names, I use nuxt/sitemap but I do not understand how to add these dinamics urls (/stocks/company symbol) to sitemap.xml.

8 Replies

kapa.ai•3w ago

Hi @TheDreWen. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To generate a sitemap with dynamic URLs from an API using @nuxtjs/sitemap in Nuxt, you can follow these steps: 1. First, ensure you have the @nuxtjs/sitemap module installed and configured in your Nuxt project. 2. In your nuxt.config.js file, you need to set up the sitemap configuration and provide a function to generate the dynamic routes. Here's an example of how you can do this:

export default {
  // ... other config
  modules: [
    '@nuxtjs/sitemap'
  ],
  sitemap: {
    hostname: '<https://your-domain.com',>
    gzip: true,
    routes: async () => {
      // Fetch company data from your API
      const { data } = await axios.get('your-api-endpoint')
      
      // Generate routes for each company
      return data.map(company => `/stocks/${company.symbol}`)
    }
  }
}

export default {
  // ... other config
  modules: [
    '@nuxtjs/sitemap'
  ],
  sitemap: {
    hostname: '<https://your-domain.com',>
    gzip: true,
    routes: async () => {
      // Fetch company data from your API
      const { data } = await axios.get('your-api-endpoint')
      
      // Generate routes for each company
      return data.map(company => `/stocks/${company.symbol}`)
    }
  }
}

In this configuration, we're using an async function for the routes option. This function fetches data from your API and then maps the company symbols to the appropriate URL structure Docs > Getting-started > Prerendering (https://nuxt.com/docs/getting-started/prerendering). 3. Make sure to replace 'https://your-domain.com' with your actual domain and 'your-api-endpoint' with the endpoint that provides your company data. 4. If you're using Nuxt 2, ensure you're using version 2.x of @nuxtjs/sitemap Stack Overflow Post (https://stackoverflow.com/questions/77982637). 5. When you run nuxt generate or npm run generate, the sitemap will be generated including these dynamic routes V1 > Getting-started > Advanced (https://content.nuxt.com/v1/getting-started/advanced/). Remember that the exact implementation might vary depending on your API structure and how you want to format your URLs. Adjust the code accordingly to match your specific needs. If you need more detailed information or have a more complex use case, you might want to check out Nuxt Simple Sitemap (https://nuxtseo.com/sitemap/integrations/content) for a more comprehensive sitemap solution. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@1002206963532300298> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

TheDreWenOP•3w ago

not work @kapa.ai

sitemap: {
    hostname: 'http://localhost',
    gzip: true,
    routes: async () => {
      // Fetch company data from your API
      const { data } = await $fetch<{message : string, result: {societes: Societe[]}}>(process.env.API_URL+'v1/societes');
      
      // Generate routes for each company
      return data.map(company => `/stocks/${company.symbol}`)
    }
  }

sitemap: {
    hostname: 'http://localhost',
    gzip: true,
    routes: async () => {
      // Fetch company data from your API
      const { data } = await $fetch<{message : string, result: {societes: Societe[]}}>(process.env.API_URL+'v1/societes');
      
      // Generate routes for each company
      return data.map(company => `/stocks/${company.symbol}`)
    }
  }

typescript me dit que hostname, gzip et routes n"existe pas par contre je vois urls

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Il semble que vous rencontrez un problème de typage avec la configuration du sitemap dans Nuxt. Voici une explication basée sur les informations fournies dans les sources de connaissances : 1. Le problème que vous rencontrez est probablement dû à l'utilisation d'une version plus récente de @nuxtjs/sitemap qui a changé sa structure de configuration. 2. Dans les versions récentes de Nuxt (Nuxt 3), la configuration du sitemap a été modifiée. Au lieu d'utiliser hostname, gzip, et routes, vous devriez utiliser urls. C'est pourquoi TypeScript vous indique que ces propriétés n'existent pas, mais que vous voyez urls. 3. Pour résoudre ce problème, vous devriez modifier votre configuration pour utiliser urls au lieu de routes. Voici comment vous pourriez adapter votre code :

export default defineNuxtConfig({
  // ... autres configurations
  sitemap: {
    urls: async () => {
      const { data } = await $fetch<{message: string, result: {societes: Societe[]}}>(process.env.API_URL+'v1/societes');
      
      return data.result.societes.map(societe => `/stocks/${societe.symbol}`);
    }
  }
})

export default defineNuxtConfig({
  // ... autres configurations
  sitemap: {
    urls: async () => {
      const { data } = await $fetch<{message: string, result: {societes: Societe[]}}>(process.env.API_URL+'v1/societes');
      
      return data.result.societes.map(societe => `/stocks/${societe.symbol}`);
    }
  }
})

4. Notez que hostname et gzip ne sont plus nécessaires dans cette nouvelle configuration. Le hostname sera automatiquement déterminé par Nuxt, et la compression gzip est gérée différemment. 5. Si vous avez besoin de plus de contrôle ou de fonctionnalités avancées pour votre sitemap, vous pourriez envisager d'utiliser Nuxt Simple Sitemap (https://nuxtseo.com/sitemap/integrations/content), qui offre une intégration plus complète et des options plus avancées. 6. Si vous utilisez toujours Nuxt 2, assurez-vous d'utiliser la version 2.x de @nuxtjs/sitemap Stack Overflow Post (https://stackoverflow.com/questions/77982637). Dans ce cas, votre configuration originale devrait fonctionner, mais vous devrez peut-être ajuster les types. N'oubliez pas de vérifier la version de Nuxt et de @nuxtjs/sitemap que vous utilisez, car cela peut affecter la structure de configuration correcte à utiliser. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@1002206963532300298> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

TheDreWenOP•3w ago

@kapa.ai [nitro 14:49:56] ERROR ReferenceError: Could not load virtual:#sitemap-virtual/global-sources.mjs (imported by node_modules/@nuxtjs/sitemap/dist/runtime/server/sitemap/urlset/sources.js): $fetch is not defined

  sitemap: {
    urls: async () => {
      const data = await $fetch<{message: string, result: {societes: Societe[]}}>(process.env.API_URL+'v1/societes');
      
      return data.result.societes.map(societe => `/stocks/${societe.symbol}`);
    }
  }

  sitemap: {
    urls: async () => {
      const data = await $fetch<{message: string, result: {societes: Societe[]}}>(process.env.API_URL+'v1/societes');
      
      return data.result.societes.map(societe => `/stocks/${societe.symbol}`);
    }
  }

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Il semble que vous rencontrez une erreur liée à l'utilisation de $fetch dans la configuration du sitemap. Cette erreur indique que $fetch n'est pas défini dans le contexte où il est utilisé. Voici comment vous pouvez résoudre ce problème : 1. Le problème vient du fait que $fetch n'est pas disponible globalement dans le contexte de la configuration du sitemap. Comme mentionné dans Github Issue (closed) (https://github.com/nuxt/nuxt/issues/29626), vous ne devriez pas remplacer le gestionnaire $fetch par défaut. 2. Au lieu d'utiliser $fetch directement, vous devriez créer votre propre fonction de récupération avec un nom différent. Voici comment vous pouvez modifier votre code :

import { $fetch as fetch } from 'ofetch'

export default defineNuxtConfig({
  // ... autres configurations
  sitemap: {
    urls: async () => {
      const data = await fetch<{message: string, result: {societes: Societe[]}}>(process.env.API_URL+'v1/societes');
      
      return data.result.societes.map(societe => `/stocks/${societe.symbol}`);
    }
  }
})

import { $fetch as fetch } from 'ofetch'

export default defineNuxtConfig({
  // ... autres configurations
  sitemap: {
    urls: async () => {
      const data = await fetch<{message: string, result: {societes: Societe[]}}>(process.env.API_URL+'v1/societes');
      
      return data.result.societes.map(societe => `/stocks/${societe.symbol}`);
    }
  }
})

3. Dans cette solution, nous importons $fetch de ofetch et le renommons en fetch. Cela vous permet d'utiliser la fonction de récupération sans interférer avec le $fetch global de Nuxt Docs > Getting-started > Data fetching (https://nuxt.com/docs/getting-started/data-fetching). 4. Si cette approche ne fonctionne pas, vous pouvez envisager d'utiliser une autre méthode pour récupérer les données, comme axios ou node-fetch, qui sont plus sûrs à utiliser dans ce contexte. 5. Assurez-vous également que votre variable d'environnement API_URL est correctement définie et accessible dans le contexte de la configuration. 6. Si vous continuez à rencontrer des problèmes, vous pourriez envisager d'utiliser Nuxt Simple Sitemap (https://nuxtseo.com/sitemap/integrations/content) qui offre une meilleure intégration et gestion des sources de données dynamiques pour les sitemaps. N'oubliez pas que la génération de sitemap se produit pendant la phase de build, donc assurez-vous que votre API est accessible à ce moment-là. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@1002206963532300298> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Generate SiteMap with api and Nuxt/sitemap