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:
- foobar.com/2021 shows me the parent page for the year
- foobar.com/2021/jun shows me the parent page content for the year + child page for the month
- 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:
- Add a
_monthfolder under_year, right alongside_month.vue - Add a
edit.vuethere - Add a
index.vuein addition - 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?