Compile Markdown to Vue with remark
Last updated 2 years ago by med_freeman .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install remark-vue 
SYNC missed versions from official npm registry.


npm version npm Build Status Codecov Greenkeeper badge Dependencies devDependencies

Compile Markdown to Vue with remark

???? Release Notes


remark-vue compiles markdown to Vue. Built on remark, an extensively tested and pluggable parser.

Why? Using domPropsInnerHTML in Vue.js is a common cause of XSS attacks: user input can include script tags and other kinds of active content that reaches across domains and harms security. remark-vue builds a DOM in Vue, using Vue createElement: this means that you can display parsed & formatted Markdown content in an application without using domPropsInnerHTML.



npm install remark-vue

Table of Contents


remark.use(vue, options)


  • vue — This plugin;
  • options (Object?) — See below.

Let’s say example.js looks as follows:

var Vue = require('vue'),
    remark = require('remark'),
    vueRenderer = require('remark-vue');

var App = new Vue({
  el: '#app',
  data: function () {
    return {
      text: '# hello world'
  onChange(e) {
    this.text =;
  render() {
    return (<div>
        v-on:change={this.onChange} />
      <div id='preview'>
        { remark().use(vueRenderer).processSync(this.text).contents }


All options, including the options object itself, are optional:

  • sanitize (object or boolean, default: undefined) — Sanitation schema to use. Passed to hast-util-sanitize. The default schema, if none or true is passed, adheres to GitHub’s sanitation rules.

    This means that non-standard HAST nodes and many HTML elements are by default santized out. If you want to be more permissive, you should provide a value for sanitize.

    If false is passed, it does not sanitize input.

  • prefix (string, default: '') — Vue key.

  • Vue (Function, default: require('vue')) — Global Vue constructor.

  • remarkVueComponents (object, default: undefined) — Provides a way to override default elements (<a>, <p>, etc) by defining an object comprised of element: Component key-value pairs. For example, to output <MyLink> components instead of <a>, and <MyParagraph> instead of <p>:

    remarkVueComponents: {
      a: MyLink,
      p: MyParagraph
  • toHast (object, default: {}) — Provides options for transforming MDAST document to HAST. See mdast-util-to-hast for settings.

These can passed to remark.use() as a second argument.


remark-vue works great with:

  • remark-toc, which generates tables of contents;

  • remark-github, which generates references to GitHub issues, PRs, users, and more;

  • ...and more.

All remark nodes can be compiled to HTML.

In addition, remark-vue looks for an attributes object on each node it compiles and adds the found properties as HTML attributes on the compiled tag.


  • ⇄ Pull requests and ★ Stars are always welcome.
  • For bugs and feature requests, please create an issue.
  • Pull requests must be accompanied by passing automated tests ($ yarn test).


MIT © Titus Wormer, modified by Tom MacWright, Mapbox.

Forked by Med_freeman to remark-vue.

Current Tags

  • 0.9.4                                ...           latest (2 years ago)

2 Versions

  • 0.9.4                                ...           2 years ago
  • 0.9.2                                ...           2 years ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 1
Dependencies (4)
Dev Dependencies (12)
Dependents (0)

Copyright 2014 - 2017 © |