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

Bug report

When content is conditionally rendered in markdown the heading is still displayed in the sidebar.

I wrote a blog post on how to use cookies in VuePress. We are setting a cookie based on the users selection of what their preferred programming language is (we only have 2 choices right now).

When that choice is made we use a custom component in markdown called CodeBlock that allows us to display content to them based on the language they selected.

<code-block language='java'>
 // only show this to java users
</code-block>

The custom component looks like this

<template>
  <div class="code-block">
    <slot v-if="display"/>
  </div>
</template>

<script>
export default {
  name: 'code-block',
  props: {
    language: String
  },
  data() {
    return {
      display: false
    }
  },
  methods: {
    getCookie() {
      return document.cookie.replace(/(?:(?:^|.*;\s*)language\s*\=\s*([^;]*).*$)|^.*$/, "$1");
    },
  },
  mounted() {
    const cookieValue = this.getCookie();
    this.display = cookieValue === this.language;
  }
}
</script>

All of this works fine but the sidebar still displays the headings even if we aren't displaying them in the markdown file. My guess is the sidebar is built before the code block component is rendered. In the following screenshot I would only expect the Java sidebar item to be displayed because the C# content is hidden.

Steps to reproduce

I have created a repo that reproduces this issue

https://github.com/danvega/vuepress-code-block-issue

What is expected?

If I conditionally render items in markdown the sidebar items should not be rendered.

What is actually happening?

The sidebar menu items are rendered.

Other relevant information

• Output of npx vuepress info in my VuePress project:

Environment Info:

System:
OS: macOS 10.14.6
CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
Binaries:
Node: 12.3.1 - /usr/local/bin/node
Yarn: 1.16.0 - /usr/local/bin/yarn
npm: 6.9.0 - /usr/local/bin/npm
Browsers:
Chrome: 76.0.3809.100
Firefox: 67.0.2
Safari: 12.1.2
npmPackages:
@vuepress/core: Not Found
@vuepress/theme-default: Not Found
vuepress: Not Found
npmGlobalPackages: