feat(theme): allow adding custom layouts

closes #2547

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)
+  }
+}
+```

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>