Parse Markdown Text in Client-Side with the Vue Showdown

Vue Showdown is a vue component for parsing markdown text on the client-side with the power of showdown.js. It is wrapped in showdown.js as a Vue component, and you can use it easily.

Installation

You can install this component via Npm.

npm install vue-showdown

Import vue-showdown as a vue plugin:

// import as a Vue plugin
import { createApp } from 'vue';
import { VueShowdownPlugin } from 'vue-showdown';

const app = createApp();

// the second parameter of app.use() is optional
app.use(VueShowdownPlugin, {
  // set default flavor of showdown
  flavor: 'github',
  // set default options of showdown (will override the flavor options)
  options: {
    emoji: false,
  },
});

Or import vue-showdown as a vue component:

// import as a Vue component
import { createApp } from 'vue';
import { VueShowdown } from 'vue-showdown';

const app = createApp();

app.component('VueShowdown', VueShowdown);
Then use <VueShowdown /> in your vue SFC:

<!-- set options via props -->
<VueShowdown
  markdown="## markdown text"
  flavor="github"
  :options="{ emoji: true }"
/>

TIP

vue-showdown also provides UMD, CommonJS, and ES Module builds as vue does. Go to the Vue document for more details.

Browser

Direct script import after vue.js and showdown.js. Then use vue-showdown as a vue plugin / component.

  <div id="#app">
    <vue-showdown markdown="## markdown text" />
  </div>

  <script src="https://unpkg.com/vue@3.x/dist/vue.global.prod.js"></script>
  <script src="https://unpkg.com/showdown@1.x/dist/showdown.min.js"></script>
  <script src="https://unpkg.com/vue-showdown@3.x/vue-showdown.min.js"></script>

  <script>
    const app = Vue.createApp();

    // as vue plugin
    app.use(VueShowdownPlugin);

    // OR: as vue component
    app.component('VueShowdown', VueShowdown);

    app.mount('#app');
  </script>

Plugin Options

import { createApp } from 'vue';
import { VueShowdownPlugin } from 'vue-showdown';

const app = createApp();

app.use(VueShowdownPlugin, {
  // Plugin options here
});

flavor

Default flavor of showdown. Docs here.

type: string | null
default: null
possible values: 'github' | 'original' | 'ghost' | 'vanilla' | 'allOn'

TIP

The flavor here will be set globally by showdown.setFlavor().

Options

Default options of showdown.

type: Object
default: {}

TIP

The options here will be set globally by showdown.setOption() after showdown.setFlavor(), which will override the flavor’s options.

Component Props

markdown

The raw markdown content to parse.

type: string | null
default: null
<VueShowdown markdown="# Hello, world!" />
<!-- renders as -->
<div>
  <h1>Hello, world!</h1>
</div>

tag

The HTML tag of the markdown wrapper. Similar to vue-router’s tag.

type: string
default: 'div'
<VueShowdown markdown="# Hello, world!" tag="span" />
<!-- renders as -->
<span>
  <h1>Hello, world!</h1>
</span>

flavor

The flavor of showdown.

type: string | null
default: null
possible values: 'github' | 'original' | 'ghost' | 'vanilla' | 'allOn'

TIP

If you set flavor via props, all the options will be reset to the flavor’s options, which will override the default options you set by app.use().

Options

Options of showdown.

type: Object
default: {}

TIP

The options prop will override the default options set by app.use().

If you also set a flavor prop, the options prop will override the flavor’s options, too.

extensions

Extensions of showdown.

type: Array | null
default: null

TIP

Check the Advance - Extensions section for details.

VueTemplate

Treat the parsed HTML string as a vue template. This will allow you to use vue template syntax in your markdown.

type: Boolean
default: false

If you want to dig more you can visit its documentation and source code on Github.