Monaco Editor Vue Component
Based off React Monaco Editor Vue Monaco Editor
npm install vue-monaco-editor-fis --save
import MonacoEditor from 'vue-monaco-editor-fis'
// use in component
export default {
components: {
MonacoEditor
}
}
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 |
defaults: {
selectOnLineNumbers: true,
roundedSelection: false,
readOnly: false,
cursorStyle: 'line',
automaticLayout: false,
glyphMargin: true
}
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 |
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());
}
}
};