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