VueMirror

VueMirror is a CodeMirror component for VueJS 2.X. It is based off work from surmon-china/vue-codemirror but I've added browserify support, a Grunt build system, and cleaned up the code a bit.

Installation

This component depends on CodeMirror >= 5.X and Vue >= 2.X. You must have both installed in order to use the component.

Install them through npm:

$ npm install --save vuemirror codemirror

Getting Started

You will need to include the CodeMirror css. How you do so depends heavily on your project. The CodeMirror package includes the required files in codemirror/lib/codemirror.css. You should be able to do something similar to the following:

Require the CSS (This does not work with Browserify)

require('codemirror/lib/codemirror.css');

Include the CSS in the HTML

<link rel="stylesheet" href="/node_modules/codemirror/lib/codemirror.css">

Once you've done that, you will also need to require all addons and modes you wish to use. They are located in the CodeMirror package under codemirror/addon and codemirror/modes. You will need to include at least one mode.

After that, simply include the VueMirror component and use it.

Basic Example

<template>
    <div id="example">
        <codemirror v-model="code" :options="editorOptions"></codemirror>
    </div>
</template>
<script>
    import 'codemirror/modes/javascript/javascript';
    import { VueMirror } from 'vuemirror';
 
    export default {
        components: {
            codemirror: VueMirror
        },
        data()
        {
            return {
                code: "const foo = 'apples';"
                editorOptions: {
                    mode: "text/javascript"
                }
            };
        }
    }
</script> 

If you want to see more examples, check out the Live Demo.

API Documentation

There's not much documentation, yet. Use v-model to bind to the content of the editor, and pass CodeMirror options in via the options paramater.

Better documentation will be added in the future.

Contributing

All contributions are welcome. Please make sure to follow the same style at the code you're modifying, ans give an explanation of the changes in the pull request.

CodeMirror Documentation

• Codemirror config APIs
• Codemirror themes
• Codemirror language modes (MIME types defined)