Group pages without affecting the router - Nuxt.js

Question

I am using Nuxt to create my application and I have a group of pages that are related in a way.

So I will simplify things a bit but my current structure looks like this

/pages
  /login
  /registration
  /forgot-password
  /resend-confirmation-email
  .
  .
  .

This folder structure is creating /login, /registration, /forgot-password, /resend-confirmation-email routes, which is cool.

So, in a way I can group first four pages to a group and name it authorization.

Ideally new folder structure should look like

/pages
   /authorization
     /login
     /registration
     /forgot-password
     /resend-confirmation-email
  .
  .
  .

However what I would like is for the router to not get messed up, I would very much like for those routes to remain the way they were.

Is that possible?

Answer 1

So with no plugins and stuff, what I did was replacing the folder name from route object in extend routes function.

File nuxt.config.js

router: {
    extendRoutes(nuxtRoutes) {
      nuxtRoutes.map(route => {
        route.path = route.path.replace('/authorization', '');
        route.name = route.name.replace('authorization-', '');

        return route;
      });
    },
    ....
}

This looks like a hack to me, but it actually does exactly what I want. For some larger projects I might consider fully overriding the router but this is kinda okay for now.