CODEWITHSUNDEEP
vue.jsnuxt.jsnuxt-content
Andika Eka
Andika Eka

Reputation: 39

Nuxt content render the layout twice

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>

and the following markdown file:

---
layout: debug
---


# test  
testt

but I got the following result:

Screenshot_20240818_001236

I have look into this issue: https://github.com/nuxt/content/issues/1722 but when a apply the solution it would not work and return 404.

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

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

Upvotes: 1

Views: 106

Answers (1)

Andika Eka
Andika Eka

Reputation: 39

found the problem. 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>

Upvotes: 1

Related Questions