How to have two differents layouts without setting one as default, or using parenting

Question

I'm doing this project in order to progress in Nuxt, so I'm open to questions, tips and advice

I would like :

1. to set layout per folder so i can removed my pages/navbar-*.vue because i don't like the useless routes they created

2. that my navbar-header folder doesnt affect the the path, in next, I would have set the folder between () like explained here

Is this possible in Nuxt 3 ? What are the best practices ?

Here the arch of my project. I use navbar, but it could be for another layout like Auth

layouts/
    navbar-header.vue 
    navbar-side.vue 

pages/
    navbar-header.vue
    navbar-side.vue
    navbar-header/ 
        index.vue
        custom-themes.vue
    navbar-side/ 
        index.vue

Thank you for the time you'll spend

Answer 1

You could rename your pages with hyphen - if you don't want Nuxt to create routes.

For-example: navbar-header.vue to -navbar-header.vue

layouts/
    navbar-header.vue 
    navbar-side.vue 

pages/
    -navbar-header.vue
    navbar-side.vue
    navbar-header/ 
        index.vue
        custom-themes.vue
    navbar-side/ 
        index.vue