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.
WordPress.com
Guía Paso a Paso de WordPress con Gutenberg【2021】Aprende cómo utilizar bloques del nuevo editor
¿Es Mejor Entradas o Páginas en WordPress para SEO?【2021】Diferencias y Ventajas