Nuxt generate doesn't fill generated HTML files with content

Question

I have a Nuxt project that is built upon an external headless API (JSON), which feeds content to the application. When I try to run npm run generate, Nuxt will create a dist folder with all routes in a folder and fills each of them with an index.html file. However these HTML files are not filled with any content that originates from the API. The expected behavior is that I am able to see statically generated content.

Is somebody able to tell me why prerendering my application doesn't work? I suspect something is wrong with my nuxt.config.js:

generate: {
    routes() {
      // Routes from headless CMS
      const pages = axios.get(`${api}/routes.json`).then((res) => {
        return res.data.data.map((item) => {
          return item.route
        })
      })

      // External API with vacancies
      const vacancies = axios
        .get('https://api.external.website')
        .then((res) => {
          return res.data.jobs.map((item) => {
            return '/careers/vacancies/' + item.id
          })
        })

      // Combine both routes
      return Promise.all([pages, vacancies]).then((values) => {
        return [...values[0], ...values[1]]
      })
    }
  }

Fiyin Akinsiku Fiyin Akinsiku · Accepted Answer · 2021-01-08T20:45:41

I'm not sure why it acts that way (would also like to understand why) but this is a sample workaround that I found online

<template>
  <div>
    <nuxt-link to="/jokes">Back To Jokes</nuxt-link>
    <hr />
    <small>Joke ID: {{ $route.params.id }}</small>
  </div>
</template>

The joke ID is gotten from an external API but since nuxt generate has created routes for all the dynamic article pages and set their IDs as a parameter, I can easily pull the id from the route.

Nuxt generate doesn't fill generated HTML files with content

1 Answers