Static page within dynamic nested route not generated on NuxtJS

user_13434489 0
Viewed 100

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.

vuejs2 nuxt.js vue.js
2 Answers

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
}
user_166341830

this is a bug with nuxt 2 in vue 2.

for dynamically generated routes, and also not-english nested routes , (or maybe just generally non-english routes) when vue hydrates the component , it will face a problem and restarts it . so the data that you cached in data(){} with fetch(), will be empty again .

currently you should use static and/or english-only routes .

user_118412400
Related