vue-codemirror-lite

How to Learn Vue Codemirror Lite for Vue.js

/ Vue.js / By

CodeMirror is a Component For Vue.js. All modes and addons are not included by default (to optimize package size). See Language Modes and Addons for enabling them.

Documentation Check on GitHub

Features

  • Options Object (newValue) options passed to the CodeMirror instance.
  • Value String the editor value.

See the CodeMirror Configuration for the available options.

Installation

npm

npm install vue-codemirror-lite

// Install the plugin
var Vue = require('vue')
var VueCodeMirror = require('vue-codemirror-lite')

Vue.use(VueCodeMirror)

// Or use as component (ES6)
import Vue from 'vue'
import { codemirror } from 'vue-codemirror-lite'

export default {
  components: {
    codemirror
  }
}

browser

Include in the page

<script src="https://unpkg.com/vue-codemirror-lite/dist/vuecodemirror.min.js"></script>

install into vue

Vue.use(VueCodeMirror)

or use as components

Vue.component('codemirror', VueCodeMirror.codemirror)

CodeMirror itself was built into vuecodemirror.min.js, get CodeMirror by

window.CodeMirror = VueCodeMirror.CodeMirror

View demo in browser on JSFiddle

Usage

Usage in Component

<!-- simple -->
<codemirror :value="code"></codemirror>

<!-- simple (with bindings in Vue1.x) -->
<codemirror :value.sync="code"></codemirror>

<!-- simple (with bindings in Vue2.x) -->
<codemirror v-model="code"></codemirror>

<!-- advanced -->
<codemirror
  :value="code"
  :options="editorOption"
  ref="myEditor"
  @change="yourCodeChangeMethod">
</codemirror>
export default {
  data () {
    return {
      code: 'const str = "hello world"'
    }
  },
  computed: {
    editor() {
      // get current editor object
      return this.$refs.myEditor.editor
    }
  },
  mounted() {
    // use editor object...
    this.editor.focus()
    console.log('this is current editor object', this.editor)
  }
}

Using Language Modes and Addons

Several language modes are included with CodeMirror.

By default (to optimise bundle size) all modes and addons are not included. To enable:

  • install vue-codemirror-lite
  • require the language modes or addons after you require vue-codemirror-lite itself (If use browser version, you need to include necessary script file of mode and addons. View demo in browser on JSFiddle)
  • set the mode option in the options object
<template>
  <codemirror :options="{
    mode: 'javascript',
    extraKeys: {'Ctrl-Space': 'autocomplete'}
  }"></codemirror>
</template>

<script>
  import { codemirror } from 'vue-codemirror-lite'
  require('codemirror/mode/javascript/javascript')
  require('codemirror/mode/vue/vue')

  require('codemirror/addon/hint/show-hint.js')
  require('codemirror/addon/hint/show-hint.css')
  require('codemirror/addon/hint/javascript-hint.js')

  export default {
    ...
  }
</script>

See the demo source which implement JavaScript and vue syntax highlighting and JavaScript hint addon.

See the CodeMirror Manual for the more modes and addons.