Markdown documents are the easiest way to manage web documents and they are the integral part of any content management system.

In a Vuejs app, there may be occasions where need to display markdown contents. We can use any markdown libraries for the purpose. vue-markdown is one of them, it is Vue component capable of parse any markdown text.

Install

yarn add vue-markdown

Usage

<template>
  <div class="m-5 items-center justify-center">
      <vue-markdon>This is a **markdown** text</vue-markdon>      
  </div>
</template>
​
<script>
import VueMarkdown from "vue-markdown";

export default {
  components: {
    VueMarkdown 
  },
 };
</script>
​

The vue-markdown component come with default slot which is ideal for passing some markdown and it will get parsed only once.

Using the source

<template>
  <div class="m-5 items-center justify-center">
  <vue-markdown :source="md" :show="true"></vue-markdown>
      
  </div>
</template>
​
import VueMarkdown from "vue-markdown";

export default {
  components: {
    VueMarkdown 
  },
   computed: {
    md() {
      return this.post.content;
    },
  },
  props: {
    post: {
      type: Object,
    },
  },
};
</script>
​

Here we used a computed member to get the content and pass it to the source property. Check out the official documentation.

 This free site is ad-supported. Learn more
​