What is VitePress?
VitePress is a Static Site Generator (SSG) designed for building fast, content-centric websites. In a nutshell, VitePress takes your source content written in Markdown, applies a theme to it, and generates static HTML pages that can be easily deployed anywhere.
Just want to try it out? Skip to the Quickstart.
VitePress ships with a default theme designed for technical documentation, especially those that need to embed interactive demos. It powers this page you are reading right now, along with the documentation for Vite, Pinia, VueUse, Rollup, Mermaid, Wikimedia Codex, and many more.
The official Vue.js documentation is also based on VitePress, but uses a custom theme shared between multiple translations.
Blogs, Portfolios, and Marketing Sites
VitePress supports fully customized themes, with the developer experience of a standard Vite + Vue application. Being built on Vite also means you can directly leverage Vite plugins from its rich ecosystem. In addition, VitePress provides flexible APIs to load data (local or remote) and dynamically generate routes. You can use it to build almost anything as long as the data can be determined at build time.
The official Vue.js blog is a simple blog that generates its index page based on local content.
VitePress aims to provide a great Developer Experience (DX) when working with Markdown content.
Vite-Powered: instant server start, with edits always instantly reflected (<100ms) without page reload.
Built-in Markdown Extensions: Frontmatter, tables, syntax highlighting... you name it. Specifically, VitePress provides many advanced features for working with code blocks, making it ideal for highly technical documentation.
Vue-Enhanced Markdown: each Markdown page is also a Vue Single-File Component, thanks to Vue template's 100% syntax compatibility with HTML. You can embed interactivity in your static content using Vue templating features or imported Vue components.
Unlike many traditional SSGs, a website generated by VitePress is in fact a Single Page Application (SPA).
Fast Initial Load
Fast Post-load Navigation
More importantly, the SPA model leads to better user experience after the initial load. Subsequent navigation within the site will no longer cause a full page reload. Instead, the incoming page's content will be fetched and dynamically updated. VitePress also automatically pre-fetches page chunks for links that are within viewport. In most cases, post-load navigation will feel instant.
Interactivity Without Penalty
What About VuePress?
VitePress is the spiritual successor of VuePress. The original VuePress was based on Vue 2 and webpack. With Vue 3 and Vite under the hood, VitePress provides significantly better DX, better production performance, a more polished default theme, and a more flexible customization API.
The API difference between VitePress and VuePress mostly lies in theming and customization. If you are using VuePress 1 with the default theme, it should be relatively straightforward to migrate to VitePress.
There has also been effort invested into VuePress 2, which also supports Vue 3 and Vite with more compatibility with VuePress 1. However, maintaining two SSGs in parallel isn't sustainable, so the Vue team has decided to focus on VitePress as the main recommended SSG in the long run.