fix(<ContentRenderer>): prioritize default slot (#1460)

src/runtime/components/ContentRenderer.vue

@@ -60,6 +60,15 @@ export default defineComponent({
 
     const { value, excerpt, tag } = ctx
 
+    if (!value && slots?.empty) {
+      // Fallback on `empty` slot.
+      return slots.empty({ value, excerpt, tag, ...this.$attrs })
+    }
+
+    if (slots?.default) {
+      return slots.default({ value, excerpt, tag, ...this.$attrs })
+    }
+
     // Use built-in ContentRendererMarkdown
     if (value && value?._type === 'markdown' && value?.body?.children?.length) {
       return h(
@@ -73,16 +82,6 @@ export default defineComponent({
       )
     }
 
-    if (value && slots?.default) {
-      return slots.default({ value, excerpt, tag, ...this.$attrs })
-    } else if (slots?.empty) {
-      // Fallback on `empty` slot.
-      return slots.empty({ value, excerpt, tag, ...this.$attrs })
-    } else if (slots?.default) {
-      // Fallback on `default` slot with undefined `value` if no `empty` slot.
-      return slots.default({ value, excerpt, tag, ...this.$attrs })
-    }
-
     // Fallback on JSON.stringify if no slot at all.
     return h(
       'pre',

test/features/renderer-markdown.ts

@@ -62,5 +62,10 @@ export const testMarkdownRenderer = () => {
       const html = await $fetch('/features/custom-paragraph')
       expect(html).contains('[Paragraph]')
     })
+
+    test('override default slot', async () => {
+      const html = await $fetch('/features/slotted-content-renderer')
+      expect(html).contains('The default slot is overridden')
+    })
   })
 }

test/fixtures/basic/pages/features/slotted-content-renderer.vue

@@ -0,0 +1,18 @@
+<template>
+  <main>
+    <ContentRenderer :value="data">
+      <Alert>
+        The default slot is overridden.
+      </Alert>
+      <ContentRendererMarkdown :value="data" />
+      <template #empty>
+        <p>No content found.</p>
+      </template>
+    </ContentRenderer>
+  </main>
+</template>
+
+<script setup lang="ts">
+const path = '/'
+const { data } = await useAsyncData(`content-${path}`, () => queryContent().where({ _path: path, draft: { $ne: true } }).findOne())
+</script>