# vue-codemirror-lite

> Lite Codemirror component for Vue.js

Latest version **1.0.4** (published 2018-02-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-codemirror-lite
pnpm add vue-codemirror-lite
yarn add vue-codemirror-lite
bun add vue-codemirror-lite
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2018-02-17 |
| First published | 2017-01-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 195.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 277 |
| Author | fangxw |
| Maintainers | cnu4 |
| Keywords | vue-codemirror-lite, vue codemirror, codemirror, vue |

## Links

- npm: https://www.npmjs.com/package/vue-codemirror-lite
- Repository: https://github.com/cnu4/vue-codemirror-lite
- Issues: https://github.com/cnu4/vue-codemirror-lite/issues
- npm.io page: https://npm.io/package/vue-codemirror-lite

## Dependencies (1)

- [codemirror](https://npm.io/package/codemirror.md) ^5.22.0

## Recent versions

- 1.0.4 (latest) — 2018-02-17
- 1.0.3 — 2017-11-12
- 1.0.2 — 2017-10-15
- 1.0.1 — 2017-05-29
- 1.0.0 — 2017-01-13

## README

# Vue-Codemirror-Lite

[CodeMirror](http://codemirror.net/) Component For Vue.js (support 1.x and 2.x).

[中文文档](https://github.com/cnu4/vue-codemirror-lite/blob/master/README_CN.md)

## Lightweight

By default (to optimise bundle size) all modes and addons are not included. To enable them, see [Using Language Modes and Addons](#using-language-modes-and-addons).

## Demo

Live Demo: [https://cnu4.github.io/vue-codemirror-lite](https://cnu4.github.io/vue-codemirror-lite)

To run the demo locally, run

`npm install && npm run dev`

View demo in browser on [JSFiddle](https://jsfiddle.net/cnu4/r33vk618)

## Installation

### npm

`npm install vue-codemirror-lite`

```js
// 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](https://jsfiddle.net/cnu4/r33vk618)

## Usage

### Usage in Component

```html

<!-- 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>
```

```js
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)
  }
}
```

## Properties

 - `value` `String` the editor value
 - `options` `Object (newValue)` options passed to the CodeMirror instance

See the [CodeMirror Configuration](http://codemirror.net/doc/manual.html#config) for the available options.

## Using Language Modes and Addons

Several [language modes](https://codemirror.net/mode/) 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](https://jsfiddle.net/cnu4/r33vk618))
 - set the mode option in the options object

```html
<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](http://codemirror.net/doc/manual.html) for the more modes and addons.


## License
MIT

---
_Source: https://npm.io/package/vue-codemirror-lite · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._