feat: allow VPContent to use custom components (#5176)

src/client/theme-default/components/VPContent.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { resolveComponent } from 'vue'
 import NotFound from '../NotFound.vue'
 import { useData } from '../composables/data'
 import { useLayout } from '../composables/layout'
@@ -8,6 +9,11 @@ import VPPage from './VPPage.vue'
 
 const { page, frontmatter } = useData()
 const { isHome, hasSidebar } = useLayout()
+
+function resolveLayout(name: string) {
+  const component = resolveComponent(name)
+  return typeof component === 'string' ? null : component
+}
 </script>
 
 <template>
@@ -18,12 +24,12 @@ const { isHome, hasSidebar } = useLayout()
   >
     <slot name="not-found" v-if="page.isNotFound"><NotFound /></slot>
 
-    <VPPage v-else-if="frontmatter.layout === 'page'">
+    <VPPage v-else-if="frontmatter.layout === 'page' && !resolveLayout('page')">
       <template #page-top><slot name="page-top" /></template>
       <template #page-bottom><slot name="page-bottom" /></template>
     </VPPage>
 
-    <VPHome v-else-if="frontmatter.layout === 'home'">
+    <VPHome v-else-if="frontmatter.layout === 'home' && !resolveLayout('home')">
       <template #home-hero-before><slot name="home-hero-before" /></template>
       <template #home-hero-info-before><slot name="home-hero-info-before" /></template>
       <template #home-hero-info><slot name="home-hero-info" /></template>
@@ -36,12 +42,7 @@ const { isHome, hasSidebar } = useLayout()
       <template #home-features-after><slot name="home-features-after" /></template>
     </VPHome>
 
-    <component
-      v-else-if="frontmatter.layout && frontmatter.layout !== 'doc'"
-      :is="frontmatter.layout"
-    />
-
-    <VPDoc v-else>
+    <VPDoc v-else-if="(!frontmatter.layout || frontmatter.layout === 'doc') && !resolveLayout('doc')">
       <template #doc-top><slot name="doc-top" /></template>
       <template #doc-bottom><slot name="doc-bottom" /></template>
 
@@ -56,6 +57,8 @@ const { isHome, hasSidebar } = useLayout()
       <template #aside-ads-after><slot name="aside-ads-after" /></template>
       <template #aside-bottom><slot name="aside-bottom" /></template>
     </VPDoc>
+
+    <component v-else :is="frontmatter.layout || 'doc'" />
   </div>
 </template>