# vue2-ace-code-editor

> Vue 2 component based on ace/brace

Latest version **0.0.5** (published 2017-02-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue2-ace-code-editor
pnpm add vue2-ace-code-editor
yarn add vue2-ace-code-editor
bun add vue2-ace-code-editor
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2017-02-07 |
| First published | 2017-02-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | wjpeters |
| Maintainers | wjpeters |

## Links

- npm: https://www.npmjs.com/package/vue2-ace-code-editor
- Repository: https://github.com/wjpeters/vue2-ace-code-editor
- Homepage: https://github.com/wjpeters/vue2-ace-code-editor#readme
- Issues: https://github.com/wjpeters/vue2-ace-code-editor/issues
- npm.io page: https://npm.io/package/vue2-ace-code-editor

## Dependencies (1)

- [brace](https://npm.io/package/brace.md) ^0.8.0

## Recent versions

- 0.0.5 (latest) — 2017-02-07

## README

# vue2-ace-editor

A Vue2 component for including the [ace editor](https://ace.c9.io/).

### Installation

```
npm install -save vue2-ace-code-editor
```

### How to use

Import the component, the mode and the theme in `<script>`.

```
import editor from 'vue2-ace-code-editor'
import 'brace/mode/javascript'
import 'brace/theme/chrome'
```

Register the component in the Vue options.

```
components: {
  editor
}
```

Use the component in your `template`. Make sure to change `variable` to a string
the editor should start with (it can be an empty string too).

```
<editor :content="variable" v-on:change-content="changeContent"></editor>
```


The content-prop is required, the other props have the following defaults:

```
lang: javascript
theme: chrome
height: 300px
width: 100%
sync: false
```

If you want to change any of these defaults, just include them when you use the
component in the template.

```
<editor :content="variable" :height="'500px'"></editor>

<editor :content="variable" :width="'50%'"></editor>

<editor :content="variable" :lang="'html'"></editor>

<editor :content="variable" :theme="'github'"></editor>

<editor :content="variable" :sync="true"></editor>
```

The theme can be changed after the component already has been mounted. Just
change the string of the theme-variable.

To sync the content of the editor to the original content-variable, set the
sync prop to true. Watch out: Every time the the original variable updates, the
editor will also update it's content.

If you want to use another lang or theme, don't forget to import it.

Last but not least listen on the `editor-update`. Make sure to replace
`vm.function` with the function you want to execute.

```
mounted () {
  const vm = this;
  vm.$on('change-content', vm.function);
}
```

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