Nuxt.js: can't generate routes

user_871404 0
Viewed 2701

I want to generate both static routes (/contact, /about, ...) and dynamic routes (/project/1, /project/2, ...) for my project, so that when user refreshes the page while visiting any of these routes, the page still works.

But when doing npm run generate I only get Generated route "/" and in /dist folder I see no routes generated.

Nuxt.js version used: 2.14.7

I tried with both universal and spa modes, it works with neither.

In nuxt.config.js I have at the top:

const axios = require('axios')

const dynamicRoutes = async () => {
  const routes = await axios.get('http://my-project.com/wp/wp-json/projects/v1/posts')
    .then(res => res.data.map((project) => `/project/${project.ID}/${project.post_name}`))
    .then(res => res.concat(
      [
        '/about',
        '/contact',
        '/portfolio'
      ]
    ))
  return routes
}

Then in export default {}:

generate: {
  routes: dynamicRoutes
},
nuxt.js vue.js routes
3 Answers

router.mode='hash' seems to be incompatible with generate.routes config. When router.mode is set to hash, the Nuxt generator ignores generate.routes and only creates a single route for /, presumably because only the landing page is expected to exist in hash mode (i.e., index.html sets up a router, which handles all routing for the app).

That hash mode is also in conflict with the mode set in router.js, but if you really needed hash routing, you should opt to set it only in router.js to allow generate.routes to be processed.

Also note mode='universal' is equivalent to ssr=true, so the ssr=false config does not make sense alongside that mode. If generating a static site, you want ssr=true so that any asyncData() and fetch() hooks are invoked to populate your static page data. This setting also obviates the need to append /about, /contact, and /portfolio in dynamicRoutes(), as they would already be included in the generated routes.

GitHub PR

user_62771510

First of all you don't have to add mode: 'universal' in config. Add target: 'static' to simplify it. Read more - https://nuxtjs.org/docs/2.x/features/deployment-targets/. With ssr: true you will get full static mode website with relevant hooks as mentioned in https://stackoverflow.com/a/65208463/8153537.

Next, you can remove @nuxt/router module. Check my gist - https://gist.github.com/MexsonFernandes/d04495c86b115bbe29f26b36b0b35d2d. Nuxt would generate all the required routes as per the folder structure. So there is no need for extra config.

Check this gist for project page route - https://gist.github.com/MexsonFernandes/d04495c86b115bbe29f26b36b0b35d2d#gistcomment-3555332.

user_81535370

Could you try this code please ?

generate: {
 async routes(){
   const routes = await axios.get('http://my-project.com/wp/wp-json/projects/v1/posts')
    .then(res => res.data.map((project) => `/project/${project.ID}/${project.post_name}`))
    return [...routes,
      [
        '/about',
        '/contact',
        '/portfolio'
      ]
    ]
  }
}
user_120316480
Related