I have a /profile page that includes common elements like sidebar, which I handle with a profile layout. The /profile page also has a sub-page at /profile/favorite. I want to use both the default layout (which includes a header and a footer) and the profile layout (which includes the sidebar and other common parts) at the same time for both /profile and /profile/favorite.
However, when I set the /profile page to use the profile layout, the default layout elements (header and footer) disappear, and my transitions break.
Question:
How can I make the /profile and /profile/favorite pages share the same sidebar while maintaining the default layout (header and footer) without duplicating the code? Is there any other recommended approach to solve this problem?
I appreciate any advice or solution.
The solution is to use nested routes. In the pages folder I created a profile.vue and put there shared parts and a <NuxtPage/>. After that, I created a profile folder and put there an index.vue and a favorite.vue with the content. This way it should work with both default layout and a profile (which is basically the shared parts in the parent component, located in pages and not layouts like in the case with default). So we're using profile here as a page, but it acts like a layout, where we put a <NuxtPage/> instead of a <slot>. Hope it helps someone.