A Vue Markdown Editor for Custom Editing and Rendering

Usage no npm install needed!

<script type="module">
  import vueFreemde from '';



npm version Build Status license

What it is

A Vue Markdown Editor for Custom Editing and Rendering

Live Demo: try coding with jsfiddle

2018-12-15 23.56.19.gif


$ npm i vue-freemde -S

How to use

Import globally

import Vue from 'vue';
import VueFreemde from 'vue-freemde';
import App from './App';

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },

Import locally

import VueFreemde from 'vue-freemde';

export default {
  name: 'app',
  components: {
  data() {
    return {
      data: '',
      configs: {
        spellChecker: false,
        autofocus: true,
        toolbar: ['bold', 'italic', 'strikethrough', '|', 'link', 'image', {
          name: 'custom',
          action: (markdown) => {
            const data = markdown.value()
            this.$emit('save', data)
          className: 'fa fa-save',
          title: 'Save'
      inlineAttachmentOptions: {
        onFileReceived (file) {
          // upload to your server, get image url...
          this.settings.setAttachmentUrl(url, this)
  computed: {
    editor () {
      return this.$refs.Markdown.editor

Use in template

  <div id="app">
    <vue-freemde v-model="data" ref="Markdown" :configs="configs"></vue-freemde>


  • markdown: Custom markdown renderer hook. default use marked renderer.
  • view: The rendered callback hook, Used for binding events or element-based rendering.
  • inlineAttachmentOptions: Paste Image Parameters.
    • onFileReceived: Paste Image Received, param: file.
    • progressText: default '![uploading file...]()'
    • urlText: '![]({filename})'.
    • errorText: 'Error uploading file'.

and more configs see: freemde configuration


:smiley: if you have any comments or wish to contribute to this project, you are welcome to submit Issues or PR.

MIT - yansenlei