How to manually generate pages in Nuxt router with a 404 page fallback for .htaccess

My way of handling this kind of issue while minimizing the API calls required are following those steps:

• generate a brand new Nuxt project
• install axios: yarn add -D axios
• add this to the nuxt.config.js file

import axios from 'axios'

export default {
  ...
  generate: {
    routes: async () => {
      const users = await axios.get('https://jsonplaceholder.typicode.com/users')
      return users.data.map((user) => ({
        route: `/users/${user.id}`,
        payload: user,
      }))
    },
    fallback: 'no-user.html', // this one is not needed anymore if you ditch the redirect!
  },
}

This will generate all the needed routes, while keeping the calls to a minimum thanks to payload that will be passed later on to the pages. More info can be found in the docs.

• then, creating the /pages/users/_id.vue page does the trick

<template>
  <div>
    <div v-if="user">User name: {{ user.name }}</div>
    <div v-else-if="error">{{ error }}</div>
  </div>
</template>

<script>
export default {
  asyncData({ payload }) {
    if (payload && Object.entries(payload).length) return { user: payload }
    else return { error: 'This user does not exist' } // this will also catch users going to `/users/`
  },
}
</script>

• create some no-user.vue page, error.vue layout and you should be gucci

---

At the end, we have 10 users from the mocked API. So those are the following cases:

• if we go to /users/5, the user is already static so we do have it’s info without any extra API call
• if we go to /users/11, the user was not present at the time of build, hence he is not here and we are displaying an error
• if we go to /users, we will still be sent to the /pages/users/_id page, but since the :id will be optional there, it will error and still display the error, an index.vue can of course handle this case

My github repo for this one can be found here: https://github.com/kissu/so-nuxt-generate-placeholder-users

---

This approach is called full static in Nuxt, as explained here: https://nuxtjs.org/announcements/going-full-static/