Monaco Editor Vue Component
Based on vue-monaco-editor
npm install monaco-editor-forvue --save
import Monaco from 'monaco-editor-forvue';
// use in component
export default {
components: {
Monaco
}
}
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 |
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
<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
});