Nuxt.js: Unable to automatically generate routing configuration

Question

I want to generate static routes (/contact, /about,...) and dynamic routes (/project /1, /project/2, ...) so that when the user refreshes the page while accessing one of these routes, the page still works correctly.

But when executing npm run generate, I only get the generated route "/", in /dist The generated routes are not visible in the folder.

Nuxt.js version used: 2.14.7

I tried both modes, universal and spa, neither worked.

In the nuxt.config.js file, I added the following code 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
},

Answer 1

First of all, you don't need to add mode: 'universal' to the configuration, just add target: 'static' to simplify the configuration. Learn more - https://nuxtjs.org/docs/2.x/features/deployment-targets/. With ssr: true you will get a fully static mode website with relevant hooks as described in https://stackoverflow.com/a/65208463/8153537.

Next, you can remove the @nuxt/router module. Check out my gist - https://gist.github.com/MexsonFernandes/d04495c86b115bbe29f26b36b0b35d2d. Nuxt generates all required routes based on the folder structure, so no additional configuration is required.

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

Answer 2

router.mode='hash' appears to be incompatible with the generate.routes configuration. When router.mode is set to hash, the Nuxt generator ignores generate.routes and only creates a route for / , this is probably because the homepage is only expected to exist in hash mode (i.e. index.html has a route set up that handles all routes for the application).

This hash mode also conflicts with the mode set in router.js, but if you really need hash routing, you should choose only in router.js Set this in # to allow processing of generate.routes.

Also note that mode='universal' is equivalent to ssr=true, so the configuration ssr=false is not available in this mode significance. If generating a static site, you need ssr=true so that any asyncData() and fetch() hooks can be called to populate the static page data. This setup also eliminates the need to add /about, /contact and /portfolio in dynamicRoutes() # because they are already included in the generated route.

GitHub PR