Handling hydration mismatch with document driven mode due to layout front matter

[dbzx10299]

I have the following file structure:

|-- content
     |-- blog
           index.md
           |-- posts
                 |-- first-post.md

|-- layouts
     default.vue
     blog.vue

|-- pages
     |-- index.vue
     |-- about.vue

|-- app.vue

In app.vue

<template>
    <div>
      <!-- This is causing a hydration mismatch -->
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
    </div>
</template>

and in first-post.md

---
layout: 'blog'
---

# first blog post title

My question is, I'm trying to make a normal site and there is a homepage and about page. But the link to the blog should be handled by nuxt content and I have documentDriven mode turned on. This is causing an error to be thrown due to a hydration mismatch when I am on the /blog route.

I want nuxt documentDriven mode to take over the content directory but then use nuxt as usual for the rest of the pages that are not a blog.

[skngetich]

did you find a fix for this issue?

[arashsheyda]

@dbzx10299 @skngetich you can fix this with defining a Layout components:

components/Layout.vue

<template>
    <slot />
</template>

app.vue

<template>
  <Layout>
    <NuxtPage />
  </Layout>
</template>

[nobkd]

This Layout.vue component does nothing but adding another <div> tag to the DOM...

Actually, you don't need to use any Layout component at all, as document driven mode automatically applies the layout from the front matter (or uses the default one).

So. The initial problem was, that a <NuxtLayout> was used in the app.vue. Therefore, there were two <NuxtLayout>s applied to the page.
See #1779 (comment) and #1807 (comment)

[arashsheyda]

thanks