Awesome Open Source
Awesome Open Source

npm version npm version npm version

VueJS Medium Editor

Vue Js component for Medium Editor wrapper with But all plugins are re-writing in Vue.js All Medium Editor configs are supported




  • Medium like editor
  • Image uploader and description
    • Image width configable width for normal / expand / full screen sizing
    • Imgur uploading
  • Embed Gist
  • Inline code syntax highlighting



yarn add vuejs-medium-editor


npm install vuejs-medium-editor


add to global component

import Vue from 'vue'
import MediumEditor from 'vuejs-medium-editor'

Vue.component('medium-editor', MediumEditor)

Don't forget to include css file in your project

require 'medium-editor/dist/css/medium-editor.css'
require 'vuejs-medium-editor/src/themes/default.css'
// for the code highlighting
require 'highlight.js/styles/ocean.css';

OR in styles like below

<style lang="css">
@import "~medium-editor/dist/css/medium-editor.css";
@import "~vuejs-medium-editor/src/themes/default.css";
/*@import '~highlight.js/styles/github.css';*/
@import '~highlight.js/styles/ocean.css';


        v-on:uploaded="uploadCallback" />

import Editor from "./Editor.vue";

export default {
    data() {
        return {
            content: "",
            options: {
    components: {
      "medium-editor": Editor
    methods: {
      onChange() {
      uploadCallback(url) {
        console.log("uploaded url", url)

Available Props

  • prefill(string) - Pre filled editor value - default value,
  • readOnly(boolean) - make the editor read only. Default - false
  • options - used to pass editor options, see below
  • onChange - pass onchange event
  • hideImage - Hides image upload option (default -false)
  • hideGist - Hides gist code embed - default(false)


  • uploaded - imgur image upload callback



you can customize the toolbar buttons too

  toolbar: {
    buttons: ["bold", "italic", "underline", "quote", "h1", "h2", "h3", 'pre', 'unorderedlist']

available options: All options are available here You can also override options like in Medium Editor ;

   buttons: [
       name: 'pre',
       action: 'append-pre',
       aria: 'code highlight',
       tagNames: ['pre'],
       contentDefault: '<b><\\></b>',
       contentFA: '<i class="fa fa-code fa-lg"></i>'


Using the image option in toolbar, Add image link, highlight to edit, then select image icon

        name: 'image',
        action: 'image',
        aria: 'insert image from url',
        tagNames: ['img'],
        contentDefault: '<b>image</b>',
        contentFA: '<i class="fa fa-picture-o"></i>'

Also, available option: thanks to ErgoFriend pull request on the original repo

 options: {
    uploadUrl: "",
    uploadUrlHeader: {'Authorization': 'Client-ID a3tw6ve4wss3c'},
    file_input_name: "image",
    file_size: 1024 * 1024 * 10, 
    imgur: true,

code highlighting

  1. Code highlighting is inbuilt using highlight.js Add code snippet, highlight, then select code in toolbar(you need to add pre in toolbar, see options above)

You should include the highligh.js css file within the styles

    /*default css  */
    @import '~highlight.js/styles/default.css';
    /* github style */
    @import '~highlight.js/styles/github.css';

You can get more theme styles here

  1. Code highliting using gist, also inbuilt. Click + button, then click code(Add gist), then add gist URL, click Enter to finish

Read only example

<medium-editor :prefill="defaultValue"  :read-only="true" />

Nuxt.js Usage

create a plugin file vuejs-medium-editor.js inside /plugins dir

import Vue from 'vue'
import MediumEditor from 'vuejs-medium-editor'

Vue.component('medium-editor', MediumEditor)

import a plugin in nuxt.config.js with disable ssr mode

plugins: [
    { src: '~/plugins/vuejs-medium-editor', ssr: false },

include a css file

css: [
    'highlight.js/styles/ocean.css' //if using code highlight

About Me

Magak Emmanuel


The original repo vue2-medium-editor customised this to my preference




Open Source Love

Happy coding, Star before Fork 😊💪💯

Alternatives To Vuejs Medium Editor
Select To Compare

Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,072,184
Vue (66,995
Editor (31,934
Code (18,182
Medium (3,888
Toolbar (2,713
Text Editor (2,384
Wysiwyg (1,532
Medium Editor (83