Nuxt Content渲染布局出现嵌套重复问题求助

问题说明 #

使用Vue布局渲染Markdown文章时，出现布局重复嵌套的异常情况。相关代码与配置如下：

Debug布局组件代码 #

<template>
    <div class="container">
        <h1>container</h1>
        <div class="content">
            <h1>content</h1>
            <slot />
        </div>
    </div>
</template>

<script>
</script>

<style lang="scss" scoped>
    .container{
        padding: 2em;
        border-style: solid;
        border-color: red;
    }
    .content{
        padding: 2em;
        border-style: solid;
        border-color: blue;
    }
</style>

Markdown文件内容 #

---
layout: debug
---

# test  
testt

Nuxt配置文件（nuxt.config.ts） #

export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  modules: ["@nuxt/image", "@nuxt/content"],
  content: {
    documentDriven: true
  },
})

实际渲染出现布局嵌套重复，参考相关Issue解决方案后无效且触发404错误。

解决方法 #

方案1：关闭documentDriven模式 #

documentDriven模式会自动将文档内容注入默认布局，手动指定布局时会导致嵌套冲突，需在配置中关闭：

export default defineNuxtConfig({
  // 保留原有其他配置
  content: {
    documentDriven: false
  },
})

方案2：使用ContentRenderer组件手动渲染（保留documentDriven模式） #

若需维持documentDriven模式，需在布局组件中用<ContentRenderer>替代<slot>，避免重复渲染：

<template>
    <div class="container">
        <h1>container</h1>
        <div class="content">
            <h1>content</h1>
            <ContentRenderer :value="document" />
        </div>
    </div>
</template>

<script setup>
const { document } = useContent()
</script>

<style lang="scss" scoped>
    .container{
        padding: 2em;
        border-style: solid;
        border-color: red;
    }
    .content{
        padding: 2em;
        border-style: solid;
        border-color: blue;
    }
</style>

方案3：检查布局文件路径 #

确保布局组件放在项目根目录的layouts/文件夹下（如layouts/debug.vue），Nuxt仅自动识别该目录下的布局文件，路径错误会引发渲染异常。

验证 #

修改配置或布局代码后，重启Nuxt开发服务，访问目标Markdown页面即可确认布局不再重复嵌套。

内容的提问来源于stack exchange，提问作者Andika Eka