It's been a while since I posted a question here. People of StackOverflow, I need your help.
layouts/page.vue
<template>
<main class="flex py-10 w-full">
<AppNavigation />
<section class="basis-3/4">
<slot />
</section>
<slot name="table-of-contnets" />
</main>
</template>
pages/docs.vue
<script lang="ts" setup>
definePageMeta({
layout: 'page',
})
</script>
<template>
<ContentDoc v-slot="{ doc }">
<aside class="relative basis-1/4">
<nav class="fixed top-5 right-10 space-y-4">
<p class="font-serif text-lg">
On this page:
</p>
<AppTableOfContents
v-if="doc.body?.toc"
:toc="doc.body.toc.links"
/>
</nav>
</aside>
<ContentRenderer
class="space-y-4"
:value="doc"
/>
</ContentDoc>
</template>
I've been looking for ways to insert the <aside>
into the table-of-contents
slot but have been experiencing issues with the named slots of <ContentDoc />
taking precedence over the ones of the layout.
I'd appreciate it if you could help me