# vue-cm

> CodeMirror component for Vue.js

Latest version **1.1.0** (published 2017-08-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-cm
pnpm add vue-cm
yarn add vue-cm
bun add vue-cm
```

## 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.1.0 |
| Published | 2017-08-03 |
| First published | 2017-08-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 45 |
| Author | egoist |
| Maintainers | rem |
| Keywords | codemirror, code, editor, vue |

## Links

- npm: https://www.npmjs.com/package/vue-cm
- Repository: https://github.com/egoist/vue-cm
- Homepage: https://github.com/egoist/vue-cm#readme
- Issues: https://github.com/egoist/vue-cm/issues
- npm.io page: https://npm.io/package/vue-cm

## Dependencies (1)

- [fast-deep-equal](https://npm.io/package/fast-deep-equal.md) ^1.0.0

## Alternatives

- [flatbuffers](https://npm.io/package/flatbuffers.md) — 6.0M weekly downloads
- [jwt-simple](https://npm.io/package/jwt-simple.md) — 259.5K weekly downloads
- [@exodus/patch-broken-hermes-typed-arrays](https://npm.io/package/@exodus/patch-broken-hermes-typed-arrays.md) — 28.5K weekly downloads
- [@native-to-anchor/buffer-layout](https://npm.io/package/@native-to-anchor/buffer-layout.md) — 12.2K weekly downloads
- [binary-parser-encoder](https://npm.io/package/binary-parser-encoder.md) — 5.3K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2017-08-03
- 1.0.1 — 2017-08-02
- 1.0.0 — 2017-08-02

## README

# vue-cm

[![NPM version](https://img.shields.io/npm/v/vue-cm.svg?style=flat)](https://npmjs.com/package/vue-cm) [![NPM downloads](https://img.shields.io/npm/dm/vue-cm.svg?style=flat)](https://npmjs.com/package/vue-cm) [![CircleCI](https://circleci.com/gh/egoist/vue-cm/tree/master.svg?style=shield)](https://circleci.com/gh/egoist/vue-cm/tree/master)  [![donate](https://img.shields.io/badge/$-donate-ff69b4.svg?maxAge=2592000&style=flat)](https://github.com/egoist/donate)

**NOTE:** I'm aware of the existence of [vue-codemirror](https://github.com/surmon-china/vue-codemirror), but I built this one for good reasons:

- Smaller.
- No unnecessary abstractions, which means simpler API.
- Prebuilt bundle, you can use it with or without a bundler.
- More modern-ish.

## Install

```bash
yarn add codemirror vue-cm
```

CDN: [UNPKG](https://unpkg.com/vue-cm/dist/) | [jsDelivr](https://cdn.jsdelivr.net/npm/vue-cm/dist/)

> **NOTE**: You need to include CodeMirror as well if you're using the CDN version, basically we access it via `window.CodeMirror` in the CDN version.

## Usage

```vue
<template>
  <code-mirror 
    v-model="code"
    :options="options">
  </code-mirror>
</template>

<script>
import CodeMirror from 'vue-cm'

// Using language mode
import 'codemirror/mode/javascript/javascript'

export default {
  component: {
    CodeMirror
  },

  data() {
    return { 
      code: '',
      options: {
        mode: 'javascript'
      }
    }
  }
}
</script>

<style src="codemirror/lib/codemirror.css"></style>
```

`v-model` for components is just a syntax sugar of:

```diff
<code-mirror 
-  v-model="code"
+  :value="code"
+  @change="newValue => { code = newValue }"
  :options="options">
</code-mirror>
```

### Props

- `value`: `string` Editor value
- `options`: `object` CodeMirror instance options
- `preserveScrollPosition` `default: false`: Preserve previous scroll position after updating value.

### Events

- `change`: Emitted when a change is made, args:
  - `newValue`: New editor value
- `focus`: Emitted when the editor is focused
- `blur`: Emitted when the editor loses focus
- `scroll`: Emitted when the editor is scrolled, args:
  - `scrollInfo`
- `cursorActivity`: Emitted when cursor is moved, args:
  - `codemirror`: CodeMirror instance

### Methods

- `focus()`: focuses the CodeMirror instance
- `getCodeMirror()`: get the CodeMirror instance

You can interact with the `CodeMirror` component by using a `ref` attribute, eg: `<code-mirror ref="editor"></code-mirror>`, then you can call `this.$refs.editor.getCodeMirror()` in parent component's `mounted` hook to get the CodeMirror instance we use in the child component.

## Contributing

1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D


## Author

**vue-cm** © [egoist](https://github.com/egoist), Released under the [MIT](./LICENSE) License.<br>
Authored and maintained by egoist with help from contributors ([list](https://github.com/egoist/vue-cm/contributors)).

> [egoist.moe](https://egoist.moe) · GitHub [@egoist](https://github.com/egoist) · Twitter [@_egoistlily](https://twitter.com/_egoistlily)

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