Demo Cheat

January 1, 2020

An example markdown page that has Vue Components inside of it!

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

0

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;
}
Antoni Putra Contact Me
Antoni Putra Photo

If you’re looking to get in contact with me for business inquiries or if you have a question, feel free to contact me below. I’ll try to respond as soon as I can.