# @duxet/vue-monaco

> MonacoEditor component for Vue.js

Latest version **0.3.0** (published 2018-09-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install @duxet/vue-monaco
pnpm add @duxet/vue-monaco
yarn add @duxet/vue-monaco
bun add @duxet/vue-monaco
```

## 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.3.0 |
| Published | 2018-09-27 |
| First published | 2018-09-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 3.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 701 |
| Author | egoist |
| Maintainers | duxet |

## Links

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

## Dependencies (2)

- [nano-assign](https://npm.io/package/nano-assign.md) ^1.0.0
- [monaco-editor](https://npm.io/package/monaco-editor.md) ^0.13.1

## Recent versions

- 0.3.0 (latest) — 2018-09-27

## README

# vue-monaco

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

*[Monaco Editor](https://github.com/Microsoft/monaco-editor) is the code editor that powers VS Code.*

## Install

```bash
yarn add vue-monaco
```

## Usage

To use with webpack:

```js
// webpack.config.js
const MonocoEditorPlugin = require('monaco-editor-webpack-plugin')

module.exports = {
  plugins: [
    new MonocoEditorPlugin()
  ]
}
```

Then use the component:

```vue
<template>
  <monaco-editor
    class="editor"
    v-model="code"
    language="javascript">
  </monaco-editor>
</template>

<script>
import MonacoEditor from 'vue-monaco'

export default {
  components: {
    MonacoEditor
  },

  data() {
    return {
      code: 'const noop = () => {}'
    }
  }
}
</script>

<style>
.editor {
  width: 600px;
  height: 800px;
}
</style>
```

### Props

- `code`
- `language`
- `theme`
- `options`

### Events

| Event              | IStandaloneCodeEditor Event | Parameters                                  |
|--------------------|-----------------------------|---------------------------------------------|
| `editorMount`      |                             | IStandaloneCodeEditor                       |
| `contextMenu`      | onContextMenu               | IEditorMouseEvent                           |
| `blur`             | onDidBlurEditor             |                                             |
| `blurText`         | onDidBlurEditorText         |                                             |
| `configuration`    | onDidBlurEditorText         | IConfigurationChangedEvent                  |
| `position`         | onDidChangeCursorPosition   | ICursorPositionChangedEvent                 |
| `selection`        | onDidChangeCursorSelection  | ICursorSelectionChangedEvent                |
| `model`            | onDidChangeModel            | IModelChangedEvent                          |
| `change`           | onDidChangeModelContent     | value: string, e: IModelContentChangedEvent |
| `modelDecorations` | onDidChangeModelDecorations | IModelDecorationsChangedEvent               |
| `modelLanguage`    | onDidChangeModelLanguage    | IModelLanguageChangedEvent                  |
| `modelOptions`     | onDidChangeModelOptions     | IModelOptionsChangedEvent                   |
| `afterDispose`     | onDidDispose                |                                             |
| `focus`            | onDidFocusEditor            |                                             |
| `focusText`        | onDidFocusEditorText        |                                             |
| `layout`           | onDidLayoutChange           | EditorLayoutInfo                            |
| `scroll`           | onDidScrollChange           | IScrollEvent                                |
| `keydown`          | onKeyDown                   | IKeyboardEvent                              |
| `keyup`            | onKeyUp                     | IKeyboardEvent                              |
| `mouseDown`        | onMouseDown                 | IEditorMouseEvent                           |
| `mouseLeave`       | onMouseLeave                | IEditorMouseEvent                           |
| `mouseMove`        | onMouseMove                 | IEditorMouseEvent                           |
| `mouseUp`          | onMouseUp                   | IEditorMouseEvent                           |


### Methods

- `getMonaco(): IStandaloneCodeEditor`: Return the [editor instance](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandalonecodeeditor.html).

Use `ref` to interact with the `MonacoEditor` component in order to access methods: `<MonacoEditor ref="editor"></MonacoEditor>`, then `this.$refs.editor.getMonaco()` will be available.

## 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-monaco** © [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-monaco/contributors)).

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

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