Layout not applied on page in /pages directory

[bokub]

Environment

• Operating System: Linux
• Node Version: v14.19.1
• Nuxt Version: 3.0.0
• Nitro Version: 1.0.0
• Package Manager: [email protected]
• Builder: vite
• User Config: extends, locales, highlight
• Runtime Modules: -
• Build Modules: -

Reproduction

Stackblitz here

Describe the bug

I created a project using content-wind.

I would like to have some logic on my index page, so I created an index.vue in the /pages directory so I have the following files:

• content/blog/hello.md
• layouts/default.vue
• pages/index.vue
• app.vue

In the /blog/hello page, I can see the stuff from app.vue and layouts/default.vue, but when I open the / page, I cannot see the stuff from the default layout, only things from app.vue. Is this normal or is this a bug ?

Can I mix both document-driven development and classic pages ?

Thanks 👍

Additional context

No response

Logs

No response

[farnabaz]

Document Driven use NuxtLayout inside its catch-all page and therefore all pages that serve using it will render proper layout. You need to wrap your custom pages with <NuxtLayout> in order to render layouts.

For example, in your reproduction, the index page should be written like this

<template>
  <NuxtLayout>
    <div>
      <p>
        This is index.vue. It should have a red background because of the default
        layout, but it doesnt work.
      </p>
      <p>
        Now, check out the <a href="/about" class="text-blue-700">about</a> page
      </p>
    </div>
  </NuxtLayout>
</template>

[bokub]

That's very clear, thank you! 👍

[farnabaz]

@bokub You may also want to disable document-driven for your custom pages in order to prevent extra unnecessary request, see https://content.nuxtjs.org/guide/writing/document-driven#disable-or-control-the-page-data

[bokub]

I tried that but then I cannot access navigation 🤷

[farnabaz]

You can keep navigation and disable others:

definePageMeta({
  documentDriven: {
    page: false,
    surround: false
  }
})