VitePress Dynamic Sidebar

Install

npm install -D vitepress-dynamic-sidebar

Usage

import { defineConfig } from "vitepress";
import { withDynamicSidebar } from ".vitepress-dynamic-sidebar";

const IGNORE_FOLDERS = [
  ".git",
  ".vitepress",
  "node_modules",
  ".idea",
  ".vscode",
  "dist",
  "build",
  "coverage",
];

export default defineConfig(
  withDynamicSidebar({
    title: "Example Project",
    srcDir: ["./client", "./server"],
    ignore: IGNORE_FOLDERS,
  }),
);

srcDir accepts either a single string or an array of strings. When an array is provided, the sidebar scanner walks each listed folder while the generated VitePress config uses their shared parent directory as its effective srcDir.

Structure

.
├── package.json
├── .vitepress/
│   └── config.js
├── server/
│   └── ...
└── client/
    ├── main.js
    └── index.md/
        ├── example-a/
        │   ├── index.ts
        │   ├── example-a.md
        │   └── example-a.js
        └── example-b/
            ├── index.ts
            ├── example-b.md
            └── example-b.js

Files

<!-- example-a.md -->

---
title: Modules/Example A
---

# Example A

This is documentation for Example A.

<!-- example-b.md -->

---
title: Modules/Example B
---

# Example B

This is documentation for Example B.

<!-- index.md -->

# Overview

- [Example A](/modules/example-a)
- [Example B](/modules/example-b)