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.