Vue wrapper for the Monaco Editor
npm install --save-dev monaco-editor-webpack-plugin
npm install --save vue-monaco-component
// webpack.config.js
const MonacoEditorPlugin = require("monaco-editor-webpack-plugin");
module.exports = {
plugins: [new MonacoEditorPlugin()]
};
// Component.vue
<template>
<monaco-editor
v-model="code"
language="handlebars"
theme="vs-dark"
style="width: 100%; height: 200px;"
></monaco-editor>
</template>
<script>
import MonacoEditor from "vue-monaco-component";
export default {
data() {
return {
code: ""
};
},
components: {
MonacoEditor
}
};
</script>
- Babel 7
- Webpack 4