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.