Frontmatter variables not resolved in sidebar

[bluemoon24]

• [ X] I confirm that this is an issue rather than a question.

Bug report

A frontmatter reference like $page.frontmatter.description is not resolved to its value in the sidebar, when used in a header level 2 (##)

Steps to reproduce

Create fresh VuePress project.
Create README.md:

---
sidebar: auto
title: A Title
description: A Description 
---

# {{ $page.frontmatter.title }}
Some text
## {{ $page.frontmatter.description }}
Some other text

What is expected?

Sidebar should display both links as defined in the YAML part, like:

A Title
   A description

What is actually happening?

Sidebar displays links as:

A Title
  {{ $page.frontmatter.description }}

Other relevant information

• Output of npx vuepress info in my VuePress project:

Environment Info:

  System:
    OS: macOS High Sierra 10.13.6
    CPU: (8) x64 Intel(R) Core(TM) i7-3720QM CPU @ 2.60GHz
  Binaries:
    Node: 10.15.2 - /usr/local/bin/node
    Yarn: 1.17.3 - ~/.yarn/bin/yarn
    npm: 6.13.0 - ~/.config/yarn/global/node_modules/.bin/npm
  Browsers:
    Chrome: 78.0.3904.87
    Firefox: 66.0.3
    Safari: 13.0.2
  npmPackages:
    @vuepress/core:  1.2.0 
    @vuepress/theme-default:  1.2.0 
    vuepress: ^1.2.0 => 1.2.0 
  npmGlobalPackages:
    vuepress: Not Found

[meteorlxy]

It's not a bug, but something related to the limitation of current VuePress workflow.

• The sidebar headers is extracted from markdown files before transform them into Vue SFC.
• The Vue template syntax will take effect after it's transformed into Vue SFC.
• Thus, the Vue template syntax will be treated as raw string when extracing sidebar headers.

Avoid using Vue template syntax in headers if you want to use the headers data.