Nuxt Dynamic routing from api

Question

I'm having an issue with extendRoutes in nuxt.config.ts

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..

so in Nuxt.config.ts i do this:

 router: {
  extendRoutes(routes resolve){
    cms.getRoutes().then(x => { <-- this returns an array from api call with objects needed for path
       for(var i = 0; i < x.items.lenth; i++){
         routes.push({
            name: x.items[i].name,
            component: component: resolve(__dirname, `pages/index.vue`), <- this is just and ex. of comp.
            path: x.items[i].slug,
         });
       }
    })
  }
}

This creates an inifinite loop because but i dont await the response. But if I use async/await i get an nuxt error saying "routes.forEach is not a function".

Here is the async version:


async extendRoutes(routes: any, resolve: any) {

        await cms.GetSitemap().then((x: any) => {
            for(var i = 0; i < x.items.lenth; i++){
             routes.push({
               name: x.items[i].name,
               component: component: resolve(__dirname, `pages/index.vue`),
               path: x.items[i].slug,
             });
        });
    }

this gives this error as soon as i try to build:

could u show us ur async attempt

Ilijanovic
– Ilijanovic

2020-06-24 11:59:59 +00:00
Commented Jun 24, 2020 at 11:59 — Ilijanovic
– Ilijanovic, Commented Jun 24, 2020 at 11:59
yes i will edit the question with async

Anders Bootsmann Larsen
– Anders Bootsmann Larsen

2020-06-24 12:07:33 +00:00
Commented Jun 24, 2020 at 12:07 — Anders Bootsmann Larsen
– Anders Bootsmann Larsen, Commented Jun 24, 2020 at 12:07
@Ifaruki it is now editted

Anders Bootsmann Larsen
– Anders Bootsmann Larsen

2020-06-24 12:11:07 +00:00
Commented Jun 24, 2020 at 12:11 — Anders Bootsmann Larsen
– Anders Bootsmann Larsen, Commented Jun 24, 2020 at 12:11

marc_s · Accepted Answer · 2020-07-25 08:39:30Z

2

Well that's not the way how to use async / await. It should eliminate .then() chaining, but you still used it here. Try it like this:

router: {
  async extendRoutes(routes, resolve) {
    let x = await cms.getRoutes();
    for (var i = 0; i < x.items.length; i++) {
      routes.push({
        name: x.items[i].name,
        component: resolve(__dirname, `pages/index.vue`),
        path: x.items[i].slug
      });
    }
  }
};

edited Jul 25, 2020 at 8:39

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Jun 24, 2020 at 12:17

Ilijanovic

15k4 gold badges29 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anders Bootsmann Larsen Over a year ago

as explained can't i use async await ;) even though i use async withot anything inside extendRoutes it gives routes.foreach is not a function

Lucas Leite Over a year ago

you cant use forEach() with async, but you can use for(). @AndersBootsmannLarsen

Anders Bootsmann Larsen · Accepted Answer · 2020-06-26 10:17:57Z

0

I ended up using the nuxt router module ( https://github.com/nuxt-community/router-module ) where i could remove the nuxt router and create my own.

Here could i use api calls and with await / async and create the logic for the routing i wanted.

answered Jun 26, 2020 at 10:17

Anders Bootsmann Larsen

3415 silver badges18 bronze badges

Collectives™ on Stack Overflow

Nuxt Dynamic routing from api

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related