Nuxt Generate Dynamic Routes Path

Question

I'm creating a site with wp-api. All my pages are inside: - pages -- _slug If my page slug are site.com/about

- pages -- about Nuxt will generate html like this. But... If my path are site.com/company/about

Can I create this routes?

PS: I'm using wordpress api for that. So if my pages has parent pages, the path are: site.com/parent/child

score 5 · Answer 1 · answered Jun 05 '18 at 09:59

You can use the routes key in nuxt.config.js to do this.

The docs are here: https://nuxtjs.org/api/configuration-generate/#routes

In a nutshell, you can write a function in nuxt.config.js:generate.routes which generates the pages for you.

Here is an example: nuxt.config.js:

const axios = require('axios')

module.exports = {
  ...
  generate: {
    routes: function () {
      return axios.get('https://your-wordpress-api/')
      .then((res) => {
        return res.data.map((page) => {
          let route = '/whatever/you/like/' + page.slug
        })
      })
    }
  }
}

Some tips:

You can add the payload to speed things up a little: https://nuxtjs.org/api/configuration-generate/#speeding-up-dynamic-route-generation-with-code-payload-code-
If you need to make a number of requests, use axios.spread

Nuxt Generate Dynamic Routes Path

1 Answers1

Linked