Vue Components in Markdown

(This is a test page)

Below is a Vue Component from ~/components/CounterComponent.vue:


Here is another component from ~/components/TransitionComponent.vue:


The ability to use Vue Components in Markdown was added in Gridsome v0.7 with the vue-remark plugin.

    <div class="container-inner mx-auto my-16">
      <h1 class="text-4xl font-bold leading-tight">{{ $ }}</h1>
      <div class="text-xl text-gray-600 mb-8">{{ $ }}</div>
      <div class="markdown-body" v-html="$" />
.test {
  background: white;
  color: red;