fix(document-driven): sync page layout (#1519)

playground/document-driven/content/_theme.yml

@@ -1 +1,2 @@
 test: 'Hello World'
+layout: debug

playground/document-driven/layouts/debug.vue

@@ -0,0 +1,19 @@
+<script setup>
+const { layout } = useContent()
+</script>
+<template>
+  <div>
+    <PageNav />
+    <pre>Layout: {{ layout }}</pre>
+    <slot />
+  </div>
+</template>
+
+<style>
+body, html {
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+  min-width: 100vw;
+}
+</style>

playground/document-driven/nuxt.config.ts

@@ -11,7 +11,8 @@ export default defineNuxtConfig({
           },
           without: ['_']
         }
-      }
+      },
+      layoutFallbacks: ['theme']
     }
   }
 })

src/runtime/composables/content.ts

@@ -41,20 +41,12 @@ export const useContent = () => {
   /**
    * Current `page` key, computed from path and content state.
    */
-  const page = computed(
-    () => {
-      return pages.value[_path.value]
-    }
-  )
+  const page = computed(() => pages.value[_path.value])
 
   /**
    * Current `surround` key, computed from path and content state.
    */
-  const surround = computed(
-    () => {
-      return surrounds.value[_path.value]
-    }
-  )
+  const surround = computed(() => surrounds.value[_path.value])
 
   /**
    * Table of contents from `page`.
@@ -64,7 +56,7 @@ export const useContent = () => {
   /**
    * Content type from `page`.
    */
-  const type = computed(() => page.value?.meta?.type)
+  const type = computed(() => page.value?.type)
 
   /**
    * Excerpt from `page`.
@@ -74,7 +66,7 @@ export const useContent = () => {
   /**
    * Layout type from `page`.
    */
-  const layout = computed(() => page.value?.meta?.layout)
+  const layout = computed(() => page.value?.layout)
 
   /**
    * Next page from `surround`.

src/runtime/pages/document-driven.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useContent, useContentHead, useRequestEvent } from '#imports'
 
-const { page } = useContent()
+const { page, layout } = useContent()
 
 // Page not found, set correct status code on SSR
 if (!page.value && process.server) {
@@ -14,7 +14,7 @@ useContentHead(page)
 
 <template>
   <div class="document-driven-page">
-    <NuxtLayout :name="page?.layout || 'default'">
+    <NuxtLayout :name="layout || 'default'">
       <ContentRenderer v-if="page" :key="page._id" :value="page">
         <template #empty="{ value }">
           <DocumentDrivenEmpty :value="value" />

src/runtime/plugins/documentDriven.ts

@@ -237,6 +237,7 @@ export default defineNuxtPlugin((nuxt) => {
         }
         // Apply layout
         to.meta.layout = layoutName
+        _page.layout = layoutName
 
         // Update values
         pages.value[_path] = _page