Introduction

VuePress is composed of two parts: a minimalistic static site generator (opens new window) with a Vue-powered theming system and Plugin API, and a default theme optimized for writing technical documentation. It was created to support the documentation needs of Vue’s own sub projects.

Each page generated by VuePress has its own pre-rendered static HTML, providing great loading performance and is SEO-friendly. Yet, once the page is loaded, Vue takes over the static content and turns it into a full Single-Page Application (SPA). Extra pages are fetched on demand as the user navigates around the site.

How It Works

A VuePress site is in fact a SPA powered by Vue (opens new window), Vue Router (opens new window) and webpack (opens new window). If you’ve used Vue before, you will notice the familiar development experience when you are writing or developing custom themes (you can even use Vue DevTools to debug your custom theme!).

During the build, we create a server-rendered version of the app and render the corresponding HTML by virtually visiting each route. This approach is inspired by Nuxt (opens new window)'s nuxt generate command and other projects like Gatsby (opens new window).

Each Markdown file is compiled into HTML with markdown-it (opens new window) and then processed as the template of a Vue component. This allows you to directly use Vue inside your Markdown files and is great when you need to embed dynamic content.

Features

Built-in Markdown extensions

• Table of Contents
• Custom Containers
• Line Highlighting
• Line Numbers
• Import Code Snippets

Using Vue in Markdown

• Templating
• Using Components

Vue-powered custom theme system

• Metadata
• Content Excerpt

Default theme

• Responsive layout
• Optional Homepage
• Simple out-of-the-box header-based search
• Algolia Search
• Customizable navbar and sidebar
• Auto-generated GitHub link and page edit links
• PWA: Popup UI to refresh contents
• Last Updated
• Multi-Language Support

Blog theme

• Documentation (opens new window)
• Live Example (opens new window)

Plugin

• Powerful Plugin API
• Blog Plugin (opens new window)
• Search Plugin
• PWA Plugin
• Google Analytics Plugin
• ...

Why Not ...?

Nuxt

Nuxt is capable of doing what VuePress does, but it’s designed for building applications. VuePress is focused on content-centric static sites and provides features tailored for technical documentation out of the box.

Docsify / Docute

Both are great projects and also Vue-powered. Except they are both fully runtime-driven and therefore not SEO-friendly. If you don’t care for SEO and don’t want to mess with installing dependencies, these are still great choices.

Hexo

Hexo has been serving the Vue docs well - in fact, we are probably still a long way to go from migrating away from it for our main site. The biggest problem is that its theming system is static and string-based - we want to take advantage of Vue for both the layout and the interactivity. Also, Hexo’s Markdown rendering isn’t the most flexible to configure.

GitBook

We’ve been using GitBook for most of our sub project docs. The primary problem with GitBook is that its development reload performance is intolerable with a large amount of files. The default theme also has a pretty limiting navigation structure, and the theming system is, again, not Vue based. The team behind GitBook is also more focused on turning it into a commercial product rather than an open-source tool.