Static page within dynamic nested route not generated on NuxtJS-CodePudding

My goal is to have the following page structure

pages
--/users/
--/users/:id/
--/users/:id/edit/

edit should be generated for every :id. Right now my setup works only in development mode. On nuxt generate only the first /users/:id/edit/ is generated. All other routes get a 404 error on production!

Current setup:

- /users
   - index.vue
   /_id
      - index.vue
      - edit.vue

I also tried to add another _id.vue which i found in the documentation and here

/users
   - _id.vue
   - /id 
   [...]

I checked this as well.

In nuxt.config.js I have

ssr: true,
target: 'static',

Do I need to add something in router property in nuxt.config.js? I am not sure why it is not generated in production.

CodePudding user response：

If you are using static site generation you have to define your static routes, because Nuxt does not know how many users do you have in your data base.

You can set a generate method into your nuxt.config.js file:

  generate: {
    fallback: true,
    async routes() {
      const routes = await _getRoutes()

      return routes
    }
  }

And then declare a function called _getRoutes to generate a list of dynamic routes:

async function _getRoutes($content) {
  const usersList = [1, 2, 3] // get from your DB
  const paths = []

  usersList.forEach((userId) => {
    paths.push(`/users/${userId}`)
    paths.push(`/users/${userId}/edit`)
  })

  return paths
}