title: Nuxt Dynamic routing from api
body: <p>I'm having an issue with extendRoutes in nuxt.config.ts</p>
  <p>When i build my nuxt and generate pages i want my router to know which comonent goes to which path based on an api call..</p>
  <p>so in Nuxt.config.ts i do this:</p>
  <pre><code> router: {
    extendRoutes(routes resolve){
      cms.getRoutes().then(x =&gt; { &lt;-- this returns an array from api call with objects needed for path
         for(var i = 0; i &lt; x.items.lenth; i++){
           routes.push({
              name: x.items[i].name,
              component: component: resolve(__dirname, `pages/index.vue`), &lt;- this is just and ex. of comp.
              path: x.items[i].slug,
           });
         }
      })
    }
  }
  </code></pre>
  <p>This creates an inifinite loop because but i dont await the response. But if I use async/await i get an nuxt error saying &quot;routes.forEach is not a function&quot;.</p>
  <p>Here is the async version:</p>
  <pre><code>
  async extendRoutes(routes: any, resolve: any) {
  
          await cms.GetSitemap().then((x: any) =&gt; {
              for(var i = 0; i &lt; x.items.lenth; i++){
               routes.push({
                 name: x.items[i].name,
                 component: component: resolve(__dirname, `pages/index.vue`),
                 path: x.items[i].slug,
               });
          });
      }
  
  </code></pre>
  <p>this gives this error as soon as i try to build:</p>
  <p><a href="https://i.stack.imgur.com/phwBD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/phwBD.png" alt="nuxt error on async / await" /></a></p>