vitepress-outline-plus

Custom outline composable and components for VitePress that gather both Markdown and raw HTML headings, keep the active marker in sync on desktop/mobile, and share a consistent visual style.

Local development

# keep a local type-checker running
pnpm --filter vitepress-outline-plus dev

# compile runtime JS + d.ts output into dist/
pnpm --filter vitepress-outline-plus build

Usage

// .vitepress/config.ts
import { defineConfig } from 'vitepress'
import { outlinePlus } from 'vitepress-outline-plus'

export default defineConfig({
  vite: {
    plugins: [outlinePlus()]
  }
})

Exports

• outlinePlus from the package root
• OutlinePlusPluginOptions types from the package root
• OutlineItem types from vitepress-outline-plus/useOutline
• useOutline, useActiveAnchor from vitepress-outline-plus/useOutline
• Vue SFCs from their explicit entry points:
  • vitepress-outline-plus/CustomAsideOutline.vue
  • vitepress-outline-plus/CustomOutlineItem.vue
  • vitepress-outline-plus/CustomLocalNavOutlineDropdown.vue

Publishing

1. Make sure dependencies are installed (pnpm install).
2. Run pnpm --filter vitepress-outline-plus build to refresh the dist/ folder.
3. Inspect dist/ to confirm the generated .js, .d.ts, and copied .vue files look correct.
4. Publish from the package directory with your preferred client, for example:

   cd packages/outline-plus
   npm publish --access public

   (Use pnpm publish --filter vitepress-outline-plus if you prefer pnpm’s workflow.)

The published tarball only exposes the compiled dist/ artefacts, so consumers never touch the TypeScript sources inside your monorepo.