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/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 😊💪💯

VueJS Medium Editor

A medium like text editor for vue js WYSIWYG

VueJS Medium Editor Info

⭐ Stars88
🔗 Source
🕒 Last Updatea year ago
🕒 Created3 years ago
🐞 Open Issues5
➗ Star-Issue Ratio18
😎 Authormanuelgeek