Skip to content

Documentation plugin ​

Docs gives a package a VitePress site, embedded in your Vite dev server and built with your library. The API reference comes from the TypeDoc plugin (@mrmt/unplugin-typedoc), the sidebar from @mrmt/vitepress-plugin-sidebar.

How it works ​

There are two complementary pieces:

  1. Docs — a Vite plugin (included in Lib by default) that scaffolds a VitePress site and embeds its dev server into your main Vite dev server.
  2. TypeDocPlugin — a Vite (and Rolldown) plugin, from @mrmt/unplugin-typedoc, added to your main vite.config.ts that generates Markdown from your source files' JSDoc comments (included in Lib by default).

Dev mode ​

When you run vite dev, the docs are served at http://localhost:5173/docs/ alongside your main app — no separate terminal needed. TypeDoc (see above) also runs in watch mode, so the API reference stays up-to-date as you edit source files.

Production build ​

When you run vite build, TypeDoc runs first, then VitePress is built automatically as part of the process.

Default scaffolded files ​

The first time Docs runs it writes these files (only if they don't exist):

FileTypeDescription
docs/index.mdDefaultHome page with hero section
docs/.vitepress/config.tsDefaultVitePress config with auto-sidebar
docs/.vitepress/theme/index.tsDefaultTheme with sidebar indentation CSS
docs/.gitignoreDefaultIgnores VitePress build artifacts

Default files are written once. Delete them to regenerate.

Configuring the docs plugin ​

ts
// vite.config.ts
import { Lib } from "@mrmt/vite/lib";

export default defineConfig({
  plugins: Lib({
    // Serve docs at a different path (must start and end with /)
    docs: { serve: "/documentation/" },

    // Or disable the docs plugin entirely
    docs: false,
  }),
});

If you're not using Lib, add Docs directly:

ts
import { Docs } from "@mrmt/vite/docs";

export default defineConfig({
  plugins: [Docs()],
});

Monorepo mode ​

In a monorepo where every package keeps its docs next to its code (packages/<pkg>/docs/), scaffold one site assembling all of them. Put Docs in the root vite.config.ts with workspace: true:

ts
// vite.config.ts (monorepo root)
import { Docs } from "@mrmt/vite/docs";

export default defineConfig({
  plugins: [Docs({ workspace: true })],
});

The first run writes the same default files as above, with two differences:

  • docs/.vitepress/config.ts calls workspaceDocs() instead of the single-site Sidebar() plugin, so each package with markdown in its docs/ folder is served at /<package directory name>/, with a Packages nav dropdown, a sidebar per package, and relative .md links working across packages. Pass options (order, shell, restart, …) to workspaceDocs() in that file: it is a default file, so it is yours to edit.
  • docs/index.md has no "API Reference" button, since there is no single API reference to point at.

Notes:

  • The root package.json needs "type": "module", like the single-package site: the config imports ESM-only packages.
  • vite dev mounts the docs at /docs/ as usual. A monorepo root has no bundle entry, so build the site with vitepress build docs rather than vite build.
  • Add @mrmt/vitepress-plugin-sidebar and vitepress to the root's dev dependencies.