From f4a5c43cb00d70143cefcd9dfd9ba536f120ffda Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Mon, 7 Aug 2023 02:17:29 +0530
Subject: [PATCH] feat(theme): allow adding custom layouts

closes #2547
---
 docs/reference/default-theme-layout.md        | 24 +++++++++++++++++++
 .../theme-default/components/VPContent.vue    |  5 ++++
 2 files changed, 29 insertions(+)

diff --git a/docs/reference/default-theme-layout.md b/docs/reference/default-theme-layout.md
index 27426e9cb61d..246e20fa9f04 100644
--- a/docs/reference/default-theme-layout.md
+++ b/docs/reference/default-theme-layout.md
@@ -36,3 +36,27 @@ Option `home` will generate templated "Homepage". In this layout, you can set ex
 ## No Layout
 
 If you don't want any layout, you can pass `layout: false` through frontmatter. This option is helpful if you want a fully-customizable landing page (without any sidebar, navbar, or footer by default).
+
+## Custom Layout
+
+You can also use a custom layout:
+
+```md
+---
+layout: foo
+---
+```
+
+This will look for a component named `foo` registered in context. For example, you can register your component globally in `.vitepress/theme/index.ts`:
+
+```ts
+import DefaultTheme from 'vitepress/theme'
+import Foo from './Foo.vue'
+
+export default {
+  extends: DefaultTheme,
+  enhanceApp({ app }) {
+    app.component('foo', Foo)
+  }
+}
+```
diff --git a/src/client/theme-default/components/VPContent.vue b/src/client/theme-default/components/VPContent.vue
index 675414c2f7f4..a1479dc693a8 100644
--- a/src/client/theme-default/components/VPContent.vue
+++ b/src/client/theme-default/components/VPContent.vue
@@ -35,6 +35,11 @@ const { hasSidebar } = useSidebar()
       <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>
       <template #doc-top><slot name="doc-top" /></template>
       <template #doc-bottom><slot name="doc-bottom" /></template>