Layout got rendered twice.

[andika-eka]

I was trying to render an .md article with a vue layout. but the layout is rendered twice. one inside another.
I am using the following layout:

<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>

, the following markdown file:

---
layout: debug
---


# test  
testt

but i got the following result:

I have look into this issue: #1722 but when a apply the solution it would not work and return 404.

here is me nuxt.config.ts for additional information:

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

Thank you in advance.

[linpengteng]

I don't have app.vue, but I have the same problem.

https://stackblitz.com/edit/github-5hgwqx?file=layouts%2Fcustom.vue,content%2Fabout.md,nuxt.config.ts,content%2Findex.md

[andika-eka]

I replace the <slot /> tag with <ContentDoc />. I followed this documentation

So it should be something like:

<template>
    <div class="container">
        <h1>container</h1>
        <div class="content">
            <h1>content</h1>
            <ContentDoc />
        </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>

I guess we cant use the same template as the pages