Nuxt router, going deeper than nuxt-child

Question

I'm using Nuxt Child components, but also want to link deeper past the child.

I think this explains it best.

example.com/cars               <-- cars.vue (has nuxt-child)
example.com/cars/bmw/          <-- cars/_maker.vue (this is the child)
example.com/cars/ford/         <-- cars/_maker.vue (this is the child)
example.com/cars/bmw/i3        <-- cars/_maker/type.vue (shows wrong template)
example.com/cars/ford/mustang  <-- cars/_maker/type.vue (shows wrong template)

_type.vue is not rendered, it uses the _maker.vue template instead.

I have no extended routes setup, it's purly off the directory structure routing.

How do I get the /i3 and /mustang routes to use the type.vue template?

I think I can do it by not using Nuxt-Child and doing something like this, but I loose the good Nuxt-Child behavior.

example.com/cars               <-- cars/index.vue
example.com/cars/bmw/          <-- cars/_maker/index.vue
example.com/cars/bmw/i3        <-- cars/_maker/_type.vue

Answer 1

Try setting the structure on pages folders like this.

pages/
--| _cars/
-----| _maker/
--------| _type.vue
--------| index.vue
-----| _maker.vue
-----| index.vue
--| _cars.vue
--| index.vue

Just add the <nuxt-child/> in _cars.vue, _maker.vue and _type.vue and remove the index.vue files if you don't need it. .