Monaco Editor Vue Component
Based on vue-monaco-editor
npm install monaco-editor-forvue --saveimport 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
});