vue-monaco-editor-fis

vue-monaco-editor

Monaco Editor Vue Component

Based off React Monaco Editor Vue Monaco Editor

Setup

npm install vue-monaco-editor-fis --save

Simple Vue Use

import MonacoEditor from 'vue-monaco-editor-fis'
 
// use in component
export default {
  components: {
    MonacoEditor
  }
}

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
highlighted	Array[Object]	[{ number: 0, class: ''}]	Lines to highlight with numbers and .classes
changeThrottle	Number(ms)	0	throttle codeChange emit
srcPath	String	""	see Webpack Use below
editorOptions	Object	Merged with defaults below	See Monaco Editor Options

Editor Default Options

defaults: {
  selectOnLineNumbers: true,
  roundedSelection: false,
  readOnly: false,
  cursorStyle: 'line',
  automaticLayout: false,
  glyphMargin: true
}

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

<MonacoEditor
    height="600"
    language="json"
    :code="code"
    :editorOptions="options"
    @mounted="onMounted"
    @codeChange="onCodeChange"
    >
</MonacoEditor>

Parent

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