Custom Routes in NuxtJS

Question

I am wondering how to rename routes in nuxtjs.

In particular, I have a folder called pages with a number of files in that folder (like about-us, contact-us, etc). However, I do NOT want the route to be www.mysite.com/pages/about-us, but rather www.mysite.com/about-us. That is to say, I want to remove pages from the route.

Any idea how I can do this?

Answer 1

To customize the route path, simply, you can use extendRoutes function in the nuxt.config.js and edit the path property like this:

export default {
  ...
  router: {
    extendRoutes(routes, resolve) {
      return [
        {
          name: 'about',
          path: '/my-about-us', // <--- change this
          component: resolve(__dirname, 'pages/about/index.vue'),
          chunkName: 'pages/about/index'
        },
        ...
      ]
    }
  }
}

Make sure to return all of the routes (not only about page). I used console.log(routes) to know that.

Or, you can use a condition like this:

extendRoutes(routes, resolve) {
  for (const route of routes) {
    if (route.path.includes('/about')) {
      route.path = '/my-about-us'
    }
  }
  return routes;
}

Answer 2

Refer to Routing in nuxt.js documentation page, it will automatically generate routes without pages/.

Is it possible that you have pages child folder inside the src/client/pages folder?