Vue Components in Markdown

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

0

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

hello


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;
}

Drop your email address below if you'd like to receive periodic updates from me. My focus is programming and writing, but I'm also interested in everything from martial arts to e-sports.