Use Showodown in Vue.js

Import and use Showdown

In this use case the user can write some MD and convert it to html clicking a button in the form.

Import ShowDown in your project using npm npm install showdown

Add the library to your component:

<script> 
     import showdown from "showdown"; 
... 
</script> 

Declare a variable that contains the markdown text:

 data() { 
    return { 
       markdown: '# hello' 
    } 
 } 

Add a method that convert the markdown in html:

methods: { 
    convert() { 
        let converter = new showdown.Converter(), 
            text = '# hello, markdown!'; 
            this.htmlData = converter.makeHtml(text); 
    }, 

Add a button to call the conversion from Markdown to HTML:

<button @click="convert">Convert to HTML</button>

Write the html in your page:

<span v-html="htmlData"></span>

v-html tells Vue.js that the content is safe html and can be interpreted.