VueCodemirror

CDN example

HTML

<!-- Include the Codemirror library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- Codemirror JS Vue -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-codemirror.js"></script>
<!-- Codemirror Libs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/mode/javascript/javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/addon/merge/merge.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/addon/selection/active-line.min.js"></script>
<!-- Google diff match patch -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/diff_match_patch.js"></script>
<script>
window.DIFF_DELETE = -1
window.DIFF_INSERT = 1
window.DIFF_EQUAL = 0
</script>
<!-- Include stylesheet -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/addon/merge/merge.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/theme/monokai.min.css" rel="stylesheet">

<div id="vueapp">
    <p>{{message}}</p>
    <codemirror v-model="code" :options="cmOption"></codemirror>
    <br>
    <local-codemirror ref="cmA"
                      :value="code2"
                      :options="cmOption"
                      @blur="onCmBlur($event)"
                      @focus="onCmFocus($event)"
                      @ready="onCmReady($event)"
                      @input="onCmInput">
		</local-codemirror>
    <br>
    <codemirror :merge="true" ref="cmMerge" :options="cmMergeOption"></codemirror>
    <br>
</div>

JavaScript

Vue.use(VueCodemirror)
new Vue({
	 el: '#vueapp',
	 data: {
     message: 'Hi from Vue.',
     code: 'const a = 10',
     code2: 'function b () {}',
     cmOption: {
        tabSize: 4,
        styleActiveLine: true,
        lineNumbers: true,
        mode: 'text/javascript',
        theme: "monokai"
      },
      cmMergeOption: {
         value: 'const a = 10;\nconst b = 20;',
         origLeft: null,
         orig: 'const a = 10;\nconst b = 230;',
         connect: 'align',
         mode: 'text/javascript',
         lineNumbers: true,
         collapseIdentical: false,
         highlightDifferences: true
       }
	 	},
    components: {
    	LocalCodemirror: VueCodemirror.codemirror
    },
    methods: {
      onCmBlur(cm) {
        console.log('cm blur!', cm)
      },
      onCmFocus(cm) {
        console.log('cm focus!', cm)
      },
      onCmReady(cm) {
        console.log('cm ready!', cm)
      },
      onCmInput(newCode) {
      	this.code2 = newCode
      }
    },
    computed: {
      cmA() {
        return this.$refs.cmA.codemirror
      },
      cmMerge() {
        return this.$refs.cmMerge.codemirror
      }
    },
    mounted() {
      console.log('this is codemirror A instance object', this.cmA, 'Merge instance', this.cmMerge)
      setTimeout(() => {
      	this.cmMergeOption.value = 'new cmMergeOption.value';
        this.cmMergeOption.orig = 'new cmMergeOption.orig';
      }, 5000);
    }
	})