Page | VuePress

Page

VuePress is markdown-centered. Each markdown file inside your project is a standalone page.

Routing

By default, the route path of a page is determined by the relative path of your markdown file.

Assuming this is the directory structure of your markdown files:

└─ docs
   ├─ guide
   │  ├─ getting-started.md
   │  └─ README.md
   ├─ contributing.md
   └─ README.md

Take the docs directory as your sourceDir, e.g. you are running vuepress dev docs command. Then the route paths of your markdown files would be:

Relative PathRoute Path
/README.md/
/index.md/
/contributing.md/contributing.html
/guide/README.md/guide/
/guide/getting-started.md/guide/getting-started.html

Tips

By default, both README.md and index.md would be converted to index.html and generate a slash-ending route path. However, it might cause conflicts if you want to keep both of the two files.

In such case, you can set the pagePatterns to avoid one of them being processed by VuePress, e.g. use ['**/*.md', '!**/README.md', '!.vuepress', '!node_modules'] to exclude all README.md files.

Also, some symbols like : and + may have special meanings for vue-router, so you should avoid using them, see vue-router docs for more details.

Frontmatter

A markdown file could contain a YAML frontmatter. The frontmatter must be at the top of the Markdown file and must be wrapped with a couple of triple-dashed lines. Here is a basic example:

---
lang: en-US
title: Title of this page
description: Description of this page
---

You must have noticed that those fields are similar with the Site Config in the Config File. You can override lang, title, description, etc., of current page via frontmatter. So you can take frontmatter as page scope config.

Also, VuePress has built-in support for some frontmatter fields, and your theme may have its own special frontmatter, too.

Tips

Check out the Frontmatter Reference for a full list of VuePress built-in frontmatter.

Check out the Default Theme > Frontmatter Reference for the frontmatter of default theme.

Content

The main content of your page is written in Markdown. VuePress will firstly transform your Markdown to HTML code, then treat the HTML code as <template> of Vue SFC.

With the power of markdown-it and Vue template syntax, the basic Markdown can be extended a lot. Next, check out the Markdown guide for all the extensions of Markdown in VuePress.