Nuxt nested routing doesnt work 2 levels deep

Viewed 367

I'm trying to build a Nested Page in Nuxt using this guide and this guide and running into a problem

What I want is:

  1. foobar.com/2021 shows me the parent page for the year
  2. foobar.com/2021/jun shows me the parent page content for the year + child page for the month
  3. foobar.com/2021/jun/edit shows me the parent page content for the year + the 'edit' child page for that month.

In the above cases, both the '2021' part and the 'Jun' part will be dynamic

The problem: I can get the first 2 to work but the not the edit route. This is what works currently:

/pages _year.vue _year/ _month.vue index.vue

It's demonstrated in this codesandbox here

What I've tried to get the edit route to work:

  1. Add a _month folder under _year, right alongside _month.vue
  2. Add a edit.vue there
  3. Add a index.vue in addition
  4. Add a <nuxt-child></nuxt-child> to the _month.vue

All this worked(Codesandbox link)but not exactly in the way I expected: It now shows the Month Content AND the edit content. Which makes sense because these steps convert the month and the edit into a parent-child nesting themselves. But I dont want that. I want edit to be a child of year. Is that not possible?

0 Answers
Related