如何在Vue.js（Nuxt）中正确使用嵌套具名插槽？（解决ContentDoc插槽与布局具名插槽冲突问题）

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-contents" />
  </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>

我遇到的问题 #

我一直尝试把上面的<aside>插入到布局的table-of-contents具名插槽中，但遇到了问题：ContentDoc的插槽优先级似乎高于布局的插槽，导致我的尝试失败。

我已经试过的方法 #

• 我用过<Teleport />，但感觉这种方式很生硬，而且在DevTools里会出现hydration error（水合错误）。
• 我也尝试过用AI工具解决，但没得到有效的方案，所以才来这里提问🙂

尝试的解决方案及报错情况 #

尝试的代码修改 #

我尝试了下面的写法，但遇到了问题：

<script lang="ts" setup>
definePageMeta({
  layout: 'page',
})
</script>

<template>
  <ContentDoc v-slot="{ doc }">
    <template #table-of-contents>
      <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>
    </template>

    <ContentRenderer
      class="space-y-4"
      :value="doc"
    />
  </ContentDoc>
</template>

VSCode警告截图 #

运行时错误日志 #

[3:22:02 PM]  ERROR  Internal server error: Codegen node is missing for element/if/for node. Apply appropriate transforms first.
  Plugin: vite:vue
  File: /home/oyedejioyewole/Workspaces/published/nuxt-bootstrap-icons/docs/pages/docs.vue?macro=true
      at assert (/home/oyedejioyewole/Workspaces/published/nuxt-bootstrap-icons/node_modules/.pnpm/@vue+compiler-core@3.5.13/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2042:11)
      at genNode (/home/oyedejioyewole/Workspaces/published/nuxt-bootstrap-icons/node_modules/.pnpm/@vue+compiler-core@3.5.13/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:3996:7)
      at genNodeList (/home/oyedejioyewole/Workspaces/published/nuxt-bootstrap-icons/node_modules/.pnpm/@vue+compiler-core@3.5.13/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:3971:7)
      at genNodeListAsArray (/home/oyedejioyewole/Workspaces/published/nuxt-bootstrap-icons/node_modules/.pnpm/@vue+compiler-core@3.5.13/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:3958:3)
      at genFunctionExpression (/home/oyedejioyewole/Workspaces/published/nuxt-bootstrap-icons/node_modules/.pnpm/@vue+compiler-core@3.5.13/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:4237:7)
      at genNode (/home/oyedejioyewole/Workspaces/published/nuxt-bootstrap-icons/node_modules/.pnpm/@vue+compiler-core@3.5.13/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:4033:7)
      at genObjectExpression (/home/oyedejioyewole/Workspaces/published/nuxt-bootstrap-icons/node_modules/.pnpm/@vue+compiler-core@3.5.13/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:4203:5)
      at genNode (/home/oyedejioyewole/Workspaces/published/nuxt-bootstrap-icons/node_modules/.pnpm/@vue+compiler-core@3.5.13/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:4027:7)
      at genNodeList (/home/oyedejioyewole/Workspaces/published/nuxt-bootstrap-icons/node_modules/.pnpm/@vue+compiler-core@3.5.13/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:3971:7)
      at genVNodeCall (/home/oyedejioyewole/Workspaces/published/nuxt-bootstrap-icons/node_modules/.pnpm/@vue+compiler-core@3.5.13/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:4158:3)

运行时错误截图 #

备注：内容来源于stack exchange，提问作者Oyedeji