From bb64ecba3db9ba8ffa34d17700fdd1d8c28767ab Mon Sep 17 00:00:00 2001
From: oliv37 <oliv37@users.noreply.github.com>
Date: Sat, 30 Dec 2023 11:41:37 +0100
Subject: [PATCH] docs: dynamic site config (#3266)

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
---
 docs/reference/site-config.md | 56 +++++++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)

diff --git a/docs/reference/site-config.md b/docs/reference/site-config.md
index b5e124d2..1cf9d726 100644
--- a/docs/reference/site-config.md
+++ b/docs/reference/site-config.md
@@ -24,6 +24,62 @@ export default {
 }
 ```
 
+:::details Dynamic (Async) Config
+
+If you need to dynamically generate the config, you can also default export a function. For example:
+
+```ts
+import { defineConfig } from 'vitepress'
+
+export default async () => defineConfig({
+  const posts = await (await fetch('https://my-cms.com/blog-posts')).json()
+
+  return {
+    // app level config options
+    lang: 'en-US',
+    title: 'VitePress',
+    description: 'Vite & Vue powered static site generator.',
+
+    // theme level config options
+    themeConfig: {
+      sidebar: [
+        ...posts.map((post) => ({
+          text: post.name,
+          link: `/posts/${post.name}`
+        }))
+      ]
+    }
+  }
+})
+```
+
+You can also use top-level `await`. For example:
+
+```ts
+import { defineConfig } from 'vitepress'
+
+const posts = await (await fetch('https://my-cms.com/blog-posts')).json()
+
+export default defineConfig({
+  // app level config options
+  lang: 'en-US',
+  title: 'VitePress',
+  description: 'Vite & Vue powered static site generator.',
+
+  // theme level config options
+  themeConfig: {
+    sidebar: [
+      ...posts.map((post) => ({
+        text: post.name,
+        link: `/posts/${post.name}`
+      }))
+    ]
+  }
+})
+```
+
+:::
+
 ### Config Intellisense
 
 Using the `defineConfig` helper will provide TypeScript-powered intellisense for config options. Assuming your IDE supports it, this should work in both JavaScript and TypeScript.