Vue Codemirror Editor: https://codepen.io/mjgartendev/pen/YvjgRp

index.html

<div id="app" class="editor-shell">  
  
  <div id="html-editor" class="panel">
    <div class="panel-header">Code Editor</div>
    <textarea class="panel-content" id="editor">
<button class="btn btn-lg btn-success">Demo Button</button>
    </textarea>
  </div>
  
  <div id="html-preview" class="panel">
    <div class="panel-header">Live Preview</div>
    <div id="preview" class="panel-content" v-html="model.text">
    </div>
  </div>
  
</div>

script.js

var app = new Vue({
  el: '#app',
  data: function() {
    return {
      model: {
        text: '<button class="btn btn-lg btn-success">Demo Button</button>'
      },
      editor: null
    }
  },
  
  created: function() {
    var scope = this;
    
    this.editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
      lineNumbers: true
    });
    
    this.editor.on('change', function(cm) {
      scope.model.text = cm.getValue();
    });
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.15.2/codemirror.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.js"></script>

style.css

#app, .container, body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

.editor-shell{
  display: flex;
}

.panel {
  background-color: #f5f5f5;
  width: 50%;
  border: 1px solid #ccc;
}

.panel-header {
  color: #f1f1f1;
  background-color: #35495e;
  padding: 2%;
  font-size: 1.1rem;
  font-weight: bold;
  border-bottom: .2rem solid #41b883;
}

.CodeMirror {
  background-color: #f5f5f5;
  overflow: hidden;
  height: 100%;
}

.panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: #fff;
}

.panel-content {
  display: flex;
  margin: auto;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.15.2/codemirror.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet" />

vue-codemirror-editor-https-codepen-io-mjgartendev-pen-yvjgrp.markdown

Vue Codemirror Editor: https://codepen.io/mjgartendev/pen/YvjgRp

https://codepen.io/mjgartendev/pen/YvjgRp <img src="https://s3-us-west-2.amazonaws.com/i.cdpn.io/2021228.YvjgRp.e3f3869f-35b9-4133-b8a9-6f251ac35c71.png alt="pen screenshot" />

A Pen by Michael Garten on CodePen.

License.

vue-codemirror-editor.markdown

Vue Codemirror Editor

A Pen by Michael Garten on CodePen.

License.