TransWikia.com

Nuxt.js: can't generate routes

Stack Overflow Asked by drake035 on February 12, 2021

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

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

Correct answer by tony19 on February 12, 2021

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.

Answered by RoboMex on February 12, 2021

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'
      ]
    ]
  }
}

Answered by DarioRega on February 12, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP