Vitepress Auto-generate Sidebar Data Plugin

Vite Plugin: vite-plugin-vitepress-auto-sidebar

Background

A while ago, I started migrating my personal blog site's tech stack from vuepress to vitepress. The migration process was quite straightforward, and the overall experience improved significantly. The default theme also looked much better.

This is the version you are currently visiting~

However, during the process, I encountered an issue. Vitepress officially does not support automatic generation of sidebars, unlike vuepress, which can generate them automatically.

This dilemma led me to an idea: could I write a vitepress plugin to handle the sidebar generation for me? After some research, I found that the official Vitepress plugin system is not available yet.

Considering that Vitepress is based on Vite, I thought, why not write a Vite plugin instead? And that's how vite-plugin-vitepress-auto-sidebar came to be.

Features

Automatically creates sidebar data.
Real-time updates to the sidebar data by monitoring file changes.

Installation

npm install vite-plugin-vitepress-auto-sidebar

Usage

Simply add the plugin in the .vitepress/config.ts file:

import AutoSidebar from 'vite-plugin-vitepress-auto-sidebar';
export default defineConfig({
  vite:{
    plugins:[
      // add plugin
      AutoSidebar()
    ]
  },
})