VuePress VS VitePress

[Mister-Hope]

Target

• VuePress is more likely to be a complete static site generator. It supports different bundlers (currently both Webpack and Vite) as well as plugins and themes.

  VuePress's plugin and theme APIs allow developers to extract any standalone feature into a package, any users can import them easily in projects. Through API Users / Plugins / Themes can make customizations easily, such as modifying markdown parser / bundler options/ site config, generating temp files, adding alias, etc.

• VitePress is more likely to be a modified Vite that has a built-in theme and supports converting markdown with Vue syntax support to a web page

  VitePress has no plugin or theme system, besides options it provides, simple features could be done by writing Vite plugins.

Start up, dealing pages and resolving routes

• VuePress has a initialize/prepare stage, it will read all page contents from project folder markdown files, and convert them to Page objects, any markdown content will be converted to Vue component, then VuePress process page data with hooks in plugin APIs, later it write page data/components to temp folder, VuePress holds these Page objects in app.pages in all time so it can be accessed in API hooks.

• VuePress generates routes from page objects and uses standard vue-router package, and you can inject additional information about pages in routeMeta to access it globally (How we support blogging). This also means that all page routes and a full <URL to chunk path> map is injected to client.

• VitePress starts an application immediately by loading theme entry. (Just like a Vue project using Vite)

• VitePress uses a custom router that loads markdown files directly.

  • In dev server, Vite markdown-loader plugin will check if the current path exists and provide the converted component from markdown if so, if not, 404 page is provided
  • In production server, each markdown (or page) is generated to a JS chunk based on path, VitePress just checks if the chunk exists when being requested to navigate to a path, and loads that chunk directly if so, if not 404 page is provided.

  The above means VitePress doesn't know how many pages and their path at all, it can only load a page if its path is provided. So:

  • In client (browser), only current page data and site config is available.
  • Anything related to other pages cannot be done without extra modification on VitePress, like getting title/author/tags from an internal route (you can only get whole page data if you really want), this affects a lot of features like blogging, generating links with route path, etc.

SSG (Rendering static pages)

• VuePress render pages one by one during SSG by loading page data from map. All page objects are still on app.pages because it should be accessible in onGenerated hook. （Why it takes a lot of memory)

• VitePress can render pages parallel during SSG. And only one page of data is needed besides the application itself. (Why it's fast and take little memory here)

[taozuhong]

VuePress v1 site will upgrade to VuePress v2 or VitePress? I'm in trouble now.

[Mister-Hope]

If:

• you have simple documentation site
• you accept adding every link items with both text and link
• you do not need to import complicated features directly from others or like to do your own customization
• you care about speed and memory

VitePress press is the first choice.

If you:

• have features that need to know all pages and their information like blogging
• want some common feature to be directly imported and enabled, likely to be plugin
• want to simply set sidebar, navbar and other options
• do not care much about build speed and memory
• need to work with webpack

Choose VuePress.

VitePress is the official supporting replacement of VuePress v1, while VuePress v2 remain extendable with plugin/theme API to support more customization as a community project.