Vue Components in Markdown

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.

<template>
  <Layout>
    <div class="container-inner mx-auto my-16">
      <h1 class="text-4xl font-bold leading-tight">{{ $page.post.title }}</h1>
      <div class="text-xl text-gray-600 mb-8">{{ $page.post.date }}</div>
      <div class="markdown-body" v-html="$page.post.content" />
    </div>
  </Layout>
</template>

.test {
  background: white;
  color: red;
}