fix(document-driven): rendering flash

playground/document-driven/components/content/Alert.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <div style="display: flex; align-items: center">
+      <div style="font-size: 64px;">
+        ❕
+      </div>
+      <div>
+        <h3 style="margin: 0">
+          <Markdown :use="$slots.title" unwrap="p" />
+        </h3>
+        <div>
+          <Markdown :use="$slots.default" unwrap="p" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

playground/document-driven/components/content/List.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+// Utils from Nuxt Content
+const { flatUnwrap } = useUnwrap()
+
+</script>
+
+<template>
+  <ul>
+    <li v-for="(item, index) of flatUnwrap($slots.default(), ['ul'])" :key="index">
+      ☑︎
+      <span><Markdown :use="() => item" unwrap="li" /></span>
+    </li>
+  </ul>
+</template>

playground/document-driven/content/10.alert.md

@@ -0,0 +1,10 @@
+---
+layout: blog
+---
+
+::alert{icon="ph:circle-wavy-warning-duotone"}
+#title
+This is an alert
+#default
+This is the default content of my alert!
+::

playground/document-driven/content/9.list.md

@@ -0,0 +1,8 @@
+::list
+- Item 1
+  ::list{icon="ph:check-circle-light"}
+  - Item 1.1
+  - Item 1.2
+  ::
+- Item 2
+::

playground/document-driven/layouts/reversed.vue

@@ -2,7 +2,7 @@
   <div>
     <NuxtLoadingBar />
 
-    <NuxtPage />
+    <slot />
 
     <PageNav />
   </div>

playground/shared/layouts/blog.vue

@@ -0,0 +1,18 @@
+<template>
+  <div style="max-width: 680px; margin: 0 auto">
+    <NuxtLoadingBar />
+
+    <PageNav />
+
+    <slot />
+  </div>
+</template>
+
+<style>
+body, html {
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+  min-width: 100vw;
+}
+</style>

playground/shared/layouts/default.vue

@@ -4,7 +4,7 @@
 
     <PageNav />
 
-    <NuxtPage />
+    <slot />
   </div>
 </template>
 

src/module.ts

@@ -448,12 +448,20 @@ export default defineNuxtModule<ModuleOptions>({
         nuxt.options.pages = true
 
         nuxt.hook('pages:extend', (pages) => {
-          pages.unshift({
-            name: 'slug',
-            path: '/:slug(.*)*',
-            file: resolveRuntimeModule('./pages/document-driven.vue'),
-            children: []
-          })
+          // Respect user's custom catch-all page
+          if (!pages.find(page => page.path === '/:slug(.*)*')) {
+            pages.unshift({
+              name: 'slug',
+              path: '/:slug(.*)*',
+              file: resolveRuntimeModule('./pages/document-driven.vue'),
+              children: []
+            })
+          }
+        })
+        nuxt.hook('app:resolve', (app) => {
+          if (app.mainComponent?.includes('@nuxt/ui-templates')) {
+            app.mainComponent = resolveRuntimeModule('./app.vue')
+          }
         })
       }
     } else {

src/runtime/app.vue

@@ -0,0 +1,3 @@
+<template>
+  <NuxtPage />
+</template>

src/runtime/pages/document-driven.vue

@@ -2,17 +2,20 @@
 import { useContent, useContentHead } from '#imports'
 
 const { page } = useContent()
+const currentPage = page.value
 
 useContentHead(page)
 </script>
 
 <template>
   <div class="document-driven-page">
-    <ContentRenderer v-if="page" :key="page._id" :value="page">
-      <template #empty="{ value }">
-        <DocumentDrivenEmpty :value="value" />
-      </template>
-    </ContentRenderer>
+    <NuxtLayout v-if="currentPage" :name="currentPage.layout || 'default'">
+      <ContentRenderer :key="currentPage._id" :value="currentPage">
+        <template #empty="{ value }">
+          <DocumentDrivenEmpty :value="value" />
+        </template>
+      </ContentRenderer>
+    </NuxtLayout>
     <DocumentDrivenNotFound v-else />
   </div>
 </template>