Using Vue in Markdown

    If you are using or demoing components that are not SSR friendly (for example containing custom directives), you can wrap them inside the built-in <ClientOnly> component:

    Note this does not fix components or libraries that access Browser APIs on import - in order to use code that assumes a browser environment on import, you need to dynamically import them in proper lifecycle hooks:

    1. <script>
    2. export default {
    3.   mounted () {
    4.     import('./lib-that-access-window-on-import').then(module => {
    5.     })
    6.   }
    7. }
    8. </script>

    Templating

    Each markdown file is first compiled into HTML and then passed on as a Vue component to vue-loader. This means you can use Vue-style interpolation in text:

    Input

    1. {{ 1 + 1 }}

    Output

    1. {{ 1 + 1 }}

    Directives

    Directives also work:

    Input

    1. <span v-for="i in 3">{{ i }} </span>

    Output

    The compiled component does not have any private data but does have access to the site metadata. For example:

    Input

    1. {{ $page }}

    Output

    1. {
    2.   "path": "/using-vue.html",
    3.   "title": "Using Vue in Markdown",
    4.   "frontmatter": {}
    5. }

    Input

    1. ::: v-pre
    2. `{{ This will be displayed as-is }}`
    3. :::

    Output

    ::: v-pre
    {{ This will be displayed as-is }}
    :::

    Using Components

    Any *.vue files found in .vuepress/components are automatically registered as global, components. For example:

    1. .
    2. └─ .vuepress
    3.       ├─ demo-1.vue
    4.       ├─ OtherComponent.vue
    5.       └─ Foo
    6.          └─ Bar.vue

    Inside any markdown file you can then directly use the components (names are inferred from filenames):

    ::: warning IMPORTANT
    Make sure a custom component’s name either contains a hyphen or is in PascalCase. Otherwise it will be treated as an inline element and wrapped inside a <p> tag, which will lead to hydration mismatch because <p> does not allow block elements to be placed inside it.
    :::

    Using Pre-processors

    VuePress has built-in webpack config for the following pre-processors: sass, scss, less, stylus and pug. All you need to do is installing the corresponding dependencies. For example, to enable sass, install the following in your project:

    1. yarn add -D sass-loader node-sass

    Now you can use the following in markdown and theme components:

    2. .title
    3.   font-size: 20px
    4. </style>

    Using <template lang="pug"> requires installing pug and pug-plain-loader:

    1. yarn add -D pug pug-plain-loader

    ::: tip
    If you are a Stylus user, you don’t need to install stylus and stylus-loader in your project because VuePress uses Stylus internally.

    Sometimes you may need to apply some JavaScript or CSS only to the current page. In those cases you can directly write root-level <script> or <style> blocks in the markdown file, and they will be hoisted out of the compiled HTML and used as the <script> and <style> blocks for the resulting Vue single-file component.

    Built-In Components

    It() is used to indicate that this is an external link. In VuePress this component have been followed by every external link.

    " class="reference-link">ClientOnly

    See .

    • Props:

      • custom - boolean

    • Usage：

    The compiled content of the current .md file being rendered. This will be very useful when you use Custom Layout.

    1. <Content/>

    Also see:

    " class="reference-link">Badge

    • Props:

      • text - string
      • type - string, optional value: "tip"|"warn"|"error", defaults to "tip".

    • Usage:

    You can use this component at the end of header text to add some status for some API: