How can I use markdown in the Homepage layout of the VuePress?

Question

In the features tag on the homepage layout of the Vuepress, any markdown notation can't be used due to get the error. So, I'd like to make my custom layout which is extended from the default homepage layout and to get possible to use markdown.

Is this possible? Any suggestion is welcome, thank you!

Answer 1

I agree with @Sun Haoran's answer, but want to note a good way to add content/html is using a component.

We created a front page component called HomeFeatures.vue. (see the repo) Also, we pretty much just copied this straight from vuepress.

<template>
  <div class="features">
    <div class="feature">
      <h2>AccuTerm</h2>
      <p>
        <a href="/accuterm/getting-started/">Getting Started</a><br />
        <a href="/accuterm/license-activation/">Licensing</a><br />
        <a href="/accuterm/desktop/">Desktop</a><br />
        <a href="/accuterm/web/">Web</a><br />
        <a href="/accuterm/mobile/">Mobile</a>
      </p>
    </div>
    <div class="feature">
      <h2>jBASE</h2>
      <p><a href="/jbase/">All Docs</a><br /></p>
    </div>
    <div class="feature">
      <h2>OpenQM</h2>
      <p>Main (Coming Soon!)<br /></p>
    </div>
    <div class="feature">
      <h2>MV Dashboard</h2>
      <p>
        <a href="/mv-dashboard/introduction/">Introduction</a><br />
        <a href="/mv-dashboard/installation-guide/">Installation Guide</a><br />
        <a href="/mv-dashboard/programmers-guide/">Programmers Guide</a>
      </p>
    </div>
    <div class="feature">
      <h2>MV Connect</h2>
      <p>
        <a href="/mv-connect/">Overview</a><br />
        <a href="/mv-connect/get-started/">Getting Started</a><br />
        <a href="/mv-connect/api/">API</a>
      </p>
    </div>
    <div class="feature">
      <h2>Customer Portal</h2>
      <p>
        <a href="/customer-portal/">All Docs</a>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Features'
};
</script>

And just included it like so: (see the repo)

---
home: true
heroImage: /assets/img/logo-grey.png
heroText: Product Documentation
tagline: Welcome to the future
footer: MIT Licensed | Copyright © 2019-present Company Name
---

<HomeFeatures />

Our docs live here if you'd like to see it in action.