Skip to content

Frontmatter Config

Frontmatter enables page-based configuration. On every markdown file, you can use frontmatter to override site-level or theme-level config options. Also, there are config options which you can only define in frontmatter.

yaml
---
title: Docs with VitePress
editLink: false
---

You can access frontmatter data via the $frontmatter global in Vue expressions:

md
{{ $frontmatter.title }}

title

  • Type: string

Title for the page. It's same as config.title, and it overrides the site-level config.

yaml
---
title: VitePress
---

titleTemplate

  • Type: string | boolean

The suffix for the title. It's same as config.titleTemplate, and it overrides the site-level config.

yaml
---
title: VitePress
titleTemplate: Vite & Vue powered static site generator
---

description

  • Type: string

Description for the page. It's same as config.description, and it overrides the site-level config.

yaml
---
description: VitePress
---
  • Type: HeadConfig[]

Specify extra head tags to inject:

yaml
---
head:
  - - meta
    - name: description
      content: hello
  - - meta
    - name: keywords
      content: super duper SEO
---
ts
type HeadConfig =
  | [string, Record<string, string>]
  | [string, Record<string, string>, string]

Default Theme Only

The following frontmatter options are only applicable when using the default theme.

layout

  • Type: doc | home | page
  • Default: doc

Determines the layout of the page.

  • doc - It applies default documentation styles to the markdown content.
  • home - Special layout for "Home Page". You may add extra options such as hero and features to rapidly create beautiful landing page.
  • page - Behaves similar to doc but it applies no styles to the content. Useful when you want to create a fully custom page.
yaml
---
layout: doc
---

hero home page only

Defines contents of home hero section when layout is set to home. More details in Default Theme: Home Page.

yaml
---
layout: home

hero:
  name: VitePress
  text: Vite & Vue powered static site generator.
  tagline: Simple, powerful, and performant. Meet the modern SSG framework you've always wanted.
  actions:
    - theme: brand
      text: Get Started
      link: /guide/getting-started
    - theme: alt
      text: View on GitHub
      link: https://github.com/vuejs/vitepress
---

features home page only

Defines items to display in features section when layout is set to home. More details in Default Theme: Home Page.

yaml
---
layout: home

features:
  - title: "Vite: The DX that can't be beat"
    details: Feel the speed of Vite. Instant server start and lightning fast HMR that stays fast regardless of the app size.
  - title: Designed to be simplicity first
    details: With Markdown-centered content, it's built to help you focus on writing and deployed with minimum configuration.
  - title: Power of Vue meets Markdown
    details: Enhance your content with all the features of Vue in Markdown, while being able to customize your site with Vue.
---
  • Type: boolean
  • Default: true

Whether to show navbar.

yaml
---
navbar: false
---
  • Type: boolean
  • Default: true

Whether to show sidebar.

yaml
---
sidebar: false
---

aside

  • Type: boolean | 'left'
  • Default: true

Defines the location of the aside component in the doc layout.

Setting this value to false prevents rendering of the aside container. Setting this value to true renders the aside to the right. Setting this value to 'left' renders the aside to the left.

yaml
---
aside: false
---

outline

  • Type: number | [number, number] | 'deep' | false
  • Default: 2

The levels of header in the outline to display for the page. It's same as config.themeConfig.outline, and it overrides the theme config.

lastUpdated

  • Type: boolean
  • Default: true

Whether to display Last Updated text in the current page.

yaml
---
lastUpdated: false
---
  • Type: boolean
  • Default: true

Whether to display Edit Link in the current page.

yaml
---
editLink: false
---
  • Type: boolean
  • Default: true

Whether to display footer.

yaml
---
footer: false
---

pageClass

  • Type: string

Add extra class names to a specific page.

yaml
---
pageClass: custom-page-class
---

Then you can customize styles of this specific page in .vitepress/theme/custom.css file:

css
.custom-page-class {
  /* page-specific styles */
}

VitePress Development Guide