VitePress¶

VitePress is Vue-powered, built on Vite, and ships with the lowest plugin footprint of the four frameworks. Math (KaTeX) and Mermaid diagrams work without plugins.

Use VitePress when you want fast builds, minimal config, and a Markdown-first workflow without React or Python.

Detection¶

detect identifies VitePress from these signals:

Key primitives¶

Admonitions — called "custom containers":

::: info Title
Content here.
:::

::: warning
No title variant.
:::

::: danger Stop
Destructive action.
:::

::: details Click to expand
Hidden content.
:::

Code groups — VitePress's native tab syntax (no import needed):

::: code-group

```js [config.js]
export default { ... }
```

```ts [config.ts]
export default defineConfig({ ... })
```

:::

Code block highlights — VitePress uses Shiki; line-level attrs use special comments:

def hello():  # [!code highlight]
    return "world"

Shiki-specific modifiers: # [!code focus], # [!code --], # [!code ++]. These are VitePress-only — they have no effect in other frameworks.

Recommended config¶

// .vitepress/config.mts
import { defineConfig } from 'vitepress'

export default defineConfig({
  markdown: {
    math: true,         // enables KaTeX for $…$ and $$…$$
    lineNumbers: true,
  },
  themeConfig: {
    search: { provider: 'local' },
  },
})

Use the theme tool to generate a config block for your enabled primitives.

What to read next¶