Nuxt custom router

Question

I'm trying to create a custom route in Nuxt with the following nuxt.config.js:

router: {
    base: '/',
    router: {
      extendRoutes (routes, resolve) {
        routes.push({
          name: 'custom',
          path: 'here-i-am',
          component: resolve(__dirname, 'pages/Slug.vue')
        })
      }
    }
  },

Though, when I visit localhost:3000/here-i-am - it is throwing: This page cannot be found. I have created Slug.vue under the /pages directory.

Am I missing something else? I have tried to rerun the compiler.

score 0 · Answer 1 · answered May 23 '20 at 20:19

Two issues:

You currently have extendRoutes under a nested router property, which doesn't exist. Move it to the top-level router prop:

router: {
  //router: {  // DON'T DO THIS
  //   extendRoutes() {...}
  //},

  extendRoutes() {...}
}

The path property must start with a leading slash for non-nested routes:

routes.push({
  // path: 'here-i-am'  // DON'T DO THIS

  path: '/here-i-am'
})

Nuxt custom router

1 Answers1