# VitePress — Vite and Vue Powered Static Site Generator

> VitePress is a static site generator built on top of Vite and Vue. Designed for documentation websites with Markdown-centered authoring, Vue component extensibility, and lightning-fast dev/build. The successor to VuePress by the Vue.js team.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

## Quick Use

```bash
npm i -D vitepress
mkdir docs && echo "# Hello VitePress" > docs/index.md
npx vitepress dev docs                      # Dev at :5173
npx vitepress build docs                    # Build
npx vitepress preview docs                  # Preview build
```

`docs/.vitepress/config.ts`:
```ts
import { defineConfig } from "vitepress";

export default defineConfig({
  title: "TokRepo Docs",
  description: "Open Source Asset Guides",
  themeConfig: {
    nav: [
      { text: "Home", link: "/" },
      { text: "Guide", link: "/guide/" },
    ],
    sidebar: [
      {
        text: "Getting Started",
        items: [
          { text: "Introduction", link: "/guide/" },
          { text: "Installation", link: "/guide/install" },
        ],
      },
    ],
  },
});
```

## Intro

VitePress is a static site generator built on top of Vite and Vue by the Vue.js team. Designed for documentation websites: Markdown-centered authoring, Vue component extensibility in Markdown, and lightning-fast dev/build. Successor to VuePress with a complete rewrite on Vite.

- **Repo**: https://github.com/vuejs/vitepress
- **Stars**: 17K+
- **Language**: TypeScript
- **License**: MIT

## What VitePress Does

- **Markdown + Vue** — use Vue components inside Markdown
- **Vite-powered** — instant HMR during development
- **Default theme** — beautiful docs theme with search, sidebar, nav
- **Code highlighting** — Shiki with line highlighting
- **Frontmatter** — YAML metadata per page
- **Built-in search** — local search or Algolia
- **i18n** — multi-language support
- **Last updated** — git-based timestamps
- **Custom themes** — extend or replace the default theme
- **SSG + SPA** — static generation with client-side navigation

## Comparison

| Tool | Framework | Speed | Components |
|---|---|---|---|
| VitePress | Vue + Vite | Fastest | Vue |
| Docusaurus | React | Fast | React |
| mdBook | Rust | Fast | None |
| Starlight (Astro) | Astro | Fast | Any |
| Nextra (Next.js) | React | Medium | React |

## FAQ

**Q: VitePress vs Docusaurus?**
A: VitePress is lighter (Vue + Vite); Docusaurus is more full-featured (version management, i18n, larger plugin ecosystem). Pick VitePress for Vue projects and Docusaurus for React projects.

**Q: Can I use React components?**
A: No. VitePress is bound to Vue. If you need React, pick Docusaurus or Nextra.

## Sources

- Docs: https://vitepress.dev
- GitHub: https://github.com/vuejs/vitepress
- License: MIT

---
Source: https://tokrepo.com/en/workflows/vitepress-vite-vue-powered-static-site-generator-ce6e1d98
Author: Script Depot