How to generate routes for Nuxt.js with Storyblok?

Nuxt.js allows you to export your application as a static generated website. To do so it will need to know every route available. You can use one of the following two examples to generate your routes for Nuxt.js using Storyblok.

// const axios = require('axios') 


// Using Links API
generate: {
  routes: function (callback) {
    const token = `YOUR_TOKEN`
    const version = 'published'
    let cache_version = 0

    
     // other routes that are not in Storyblok with their slug.
    let routes = []

     // Load space and receive latest cache version key to improve performance
    axios.get(`https://api.storyblok.com/v1/cdn/spaces/me?token=${token}`).then((space_res) => {

       // timestamp of latest publish
      cache_version = space_res.data.space.version

       // Call for all Links using the Links API: https://www.storyblok.com/docs/Delivery-Api/Links
      axios.get(`https://api.storyblok.com/v1/cdn/links?token=${token}&version=${version}&cv=${cache_version}`).then((res) => {
        Object.keys(res.data.links).forEach((key) => {
          if (res.data.links[key].slug != 'home') {
            routes.push('/' + res.data.links[key].slug)
          }
        })

        callback(null, routes)
      })
    }) 
  }
} 

// OR --- option two:
// Using Stories and pagination.
generate: {
  routes: function (callback) {
    const token = `YOUR_TOKEN`
    const per_page = 10
    const version = 'published'
    let cache_version = 0

    let page = 1

    // other routes that are not in Storyblok with their slug.
    let routes = []

    // Load space and receive latest cache version key to improve performance
    axios.get(`https://api.storyblok.com/v1/cdn/spaces/me?token=${token}`).then((space_res) => {

      // timestamp of latest publish
      cache_version = space_res.data.space.version

      // Call first Page of the Stories
      axios.get(`https://api.storyblok.com/v1/cdn/stories?token=${token}&version=${version}&per_page=${per_page}&page=${page}&cv=${cache_version}`).then((res) => {

        res.data.stories.forEach((story) => {
          if (story.full_slug != 'home') {
            routes.push('/' + story.full_slug)
          }
        })

        // Check if there are more pages available otherwise execute callback with current routes.
        const total = res.headers.total
        const maxPage = Math.ceil(total / per_page)
        if (maxPage <= 1) {
          callback(null, routes)
          return;
        }

        // Since we know the total we now can pregenerate all requests we need to get all stories
        let contentRequests = []
        for (let page = 2; page <= maxPage; page++) {
          contentRequests.push(axios.get(`https://api.storyblok.com/v1/cdn/stories?token=${token}&version=${version}&per_page=${per_page}&page=${page}`))
        }

        // Axios allows us to exectue all requests using axios.spread we will than generate our routes and execute the callback
        axios.all(contentRequests).then(axios.spread((...responses) => {
          responses.forEach((response) => {
            response.data.stories.forEach((story) => {
              if (story.full_slug != 'home') {
                routes.push('/' + story.full_slug)
              }
            })
          })

          callback(null, routes)
        })).catch(callback)
      })
    })
  }
}