vite-plugin-vitepress-auto-sidebar

November 8, 2025 ยท View on GitHub

The vite plugin that automatically generates sidebar data by scanning directories, based on vitepress

Npm Download License

โœจ Feature

๐Ÿš€ Automatically create the sidebar data and injected into config.ThemeConfig.sidebar

๐Ÿค– Listen globally for *.md files to automatically update sidebar data when they are added or deleted

๐Ÿ•ฏ๏ธ Usage

install vite-plugin-vitepress-auto-sidebar

# recommend using pnpm packageManager
pnpm i vite-plugin-vitepress-auto-sidebar
# or yarn
yarn add vite-plugin-vitepress-auto-sidebar
# or npm
npm install vite-plugin-vitepress-auto-sidebar

add plugin in .vitepress/config.ts

import AutoSidebar from 'vite-plugin-vitepress-auto-sidebar';

export default defineConfig({
  vite: {
    plugins: [
      // add plugin
      AutoSidebar({
        // You can also set options to adjust sidebar data
        // see option document below
      })
    ]
  },
})

Warning, you must clear the sidebar objects in the config.ts or it may not work properly

pnpm run dev

 [auto-sidebar] injected sidebar data successfully

If you see the above message, it means the plugin is working properly, otherwise there may be a problem

๐Ÿ› ๏ธ Options

Parameters

namedescriptiontypedefault
ignoreListignore specified folderstring[]true
pathcreate scan path for the sidebarstring/docs
scanRootMdFilesscan the md file in pathbooleantrue
ignoreIndexItemignore the page sidebar with only index.mdbooleanfalse
collapsedBy adding collapsed option to the sidebar group, it shows a toggle button to hide/show each section,For specific usage, please refer to VitePressbooleanfalse
deletePrefixdeletes the md file prefixstring
titleFromFileread title from md filebooleanfalse
titleFromFileByYamlread title from yaml configbooleanfalse
indexAliasFromFileread sidebar-stack alias name from index.mdbooleanfalse
indexFileUseTitleNamelet index.md use its title as name in sidebar or not.booleanfalse
Tips: about indexAliasFromFile

This tries to get value of alias from frontmatter of index.md. If not presented, uses first h1 headline as alias. If also not presented, skip alias.

A valid frontmatter for alias should like:

---
#...other attributes
alias: Example
---
Tips: about indexFileUseTitleName

If true, will override ignoreIndexItem as false.

Hooks

You can change the injected sidebar object using the hooks parameter

namedescriptiontypedefault
sideBarResolvedreceive complete sidebar objects for custom modifications(data: DefaultTheme.SidebarMulti) => DefaultTheme.SidebarMulti
sideBarItemsResolvedreceive complete sidebar subItem objects for custom modifications(data: DefaultTheme.SidebarItem[]) => DefaultTheme.SidebarItem[]
beforeCreateSideBarItemsobtain a list of file names scanned before generating sidebar subitems. If you want to sort sidebar data, it is recommended to use it(data: string[]) => string[]

License

MIT License ยฉ 2023 QC2168