Working on a Monaco Editor Vue component

vue-monaco-editor

Use the Monaco editor in your vue projects, with this adaption of React Monaco Editor.

Example

Install:

npm install vue-monaco-editor --save

Then import MonacoEditor in your *.vue file:

<template>
  <div id="app">
    <MonacoEditor
                height="300"
                width="1200"
                language="javascript"
                :code="code"
                :editorOptions="options"
                @mounted="onMounted"
                @codeChange="onCodeChange"
                >
        </MonacoEditor>
  </div>
</template>

<script>
import MonacoEditor from 'vue-monaco-editor'

export default {
  data () {
    return {
      code: '<MonacoEditor language="typescript" :code="code" :editorOptions="options" @mounted="onMounted" @codeChange="onCodeChange"></MonacoEditor>',
      options: {
        selectOnLineNumbers: true
      }
    }
  },
  components: {
    MonacoEditor
  },
}

You can use the available default component props, use them directly in your template, or bind them.

This is the result of the above code.

It also offers events emitted when the editor has mounted or changed. and in-editor options by right clicking as shown above.

Check an implementation here

This JS Visualizer is an attempt to expose the process of a javascript program running in Node v6.0.0.

The repository is available on GitHub. By Matt O'Connell