nuxt generate payload undefined

Question

I have a Nuxt project, in nuxt.config.js file, I have a function like this:

generate: {
    async routes() {
      function postRoutes() {
        return axios
          .post('https://my-server.com/api/posts')
          .then((r) => r.data.map((post) => {
            // I log post data here, it exist
            console.log(post)
            return {
              route: `post/${post.id}`,
              payload: 'post'
            }
          }))
      }
      const response = await axios
        .all([postRoutes()])
        .then(function (results) {
          const merged = [].concat(...results)
          return merged
        })
      return response
    }
  },

Then, in pages/post/_slug.vue, in asyncData, when receiving payload object, it returns undefined

async asyncData({ params, error, payload }) { {
    console.log(payoad) // return undefined
}

I don't know whether I pass the payload the wrong way or something wrong with Nuxt payload, please help !! thank you in advance

payload actually gets the correct data during generation phase, and when you look at the dist/post/ you will see your page fully rendered. I think it's only undefined during client-side render phase — tungv, Jan 16 '21 at 04:33

score 0 · Answer 1 · answered Apr 13 '23 at 01:00

Looks like you are passing the payload value as a string 'post'. Remove the single quotes from the payload value.

Change the return object from:

return {
    route: `post/${post.id}`,
    payload: 'post'
}

to:

return {
     route: `post/${post.id}`,
     payload: post
 }

nuxt generate payload undefined

1 Answers1

Linked