monaco-editor-forvue

Monaco Editor Vue Component

Based on vue-monaco-editor

Setup

npm install monaco-editor-forvue --save

Simple Vue Use

import Monaco from 'monaco-editor-forvue';
 
// use in component
export default {
  components: {
    Monaco
  }
}

Component Props

Option	Type	Default	Description
language	String	javascript
height	Number/String	100%
width	Number/String	100%
code	String	// code \n	Initial code to show
theme	String	vs-dark	vs, hc-black, or vs-dark
changeThrottle	Number(ms)	0	throttle codeChange emit
srcPath	String	""	see Webpack Use below
options	Object	Merged with defaults below	See Monaco Editor Options

Component Events

These events are available to parent component

Event	Returns	Description
mounted	editor[editor instance]	Emitted when editor has mounted
codeChange	editor[editor instance]	Emitted when code has changed

Example

Component Implementation

<Monaco
    width="600"
    height="600"
    language="javascript"
    theme="vs"
    :code="code"
    :options="options"
    :changeThrottle="500"
    @mounted="onMounted"
    @codeChange="onCodeChange"
    >
</Monaco>

export default {
  components: {
    Monaco
  },
  data() {
    return {
      code: '// Type away! \n'
    };
  },
  methods: {
    onMounted(editor) {
      this.editor = editor;
    },
    onCodeChange(editor) {
      console.log(this.editor.getValue());
    }
  }
}

set value:
this.editor.setValue(yourstring);
 
rerender editor:
this.editor.layout({
    width: 800,
    height: 800
});