monaco-editor-vue

Monaco Editor for Vue.

Installation

npm install monaco-editor-vue

Using with Webpack

<template>
  <div id="app">
    <MonacoEditor
      width="800"
      height="500"
      theme="vs-dark"
      language="javascript"
      :options="options"
      @change="onChange"
    ></MonacoEditor>
  </div>
</template>
 
<script>
import MonacoEditor from 'monaco-editor-vue';
export default {
  name: "App",
  components: {
    MonacoEditor
  },
  data() {
    return {
      options: {
        //Monaco Editor Options
      }
    }
  },
  methods: {
    onChange(value) {
      console.log(value);
    }
  }
};
</script>

Add the Monaco Webpack plugin monaco-editor-webpack-plugin to your webpack.config.js:

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
module.exports = {
  plugins: [
    new MonacoWebpackPlugin({
      // available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
      languages: ['javascript']
    })
  ]
}

If using Vue CLI instead of Webpack directly, you can add to vue.config.js:

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
 
module.exports = {
  chainWebpack: config => {
    config.plugin('monaco-editor').use(MonacoWebpackPlugin, [
      {
        // Languages are loaded on demand at runtime
        languages: ['json', 'javascript', 'html', 'xml']
      }
    ])
  }
}

Properties

If you specify value property, the component behaves in controlled mode. Otherwise, it behaves in uncontrolled mode.

• width width of editor. Defaults to 100%.
• height height of editor. Defaults to 100%.
• value value of the auto created model in the editor.
• original value of the auto created original model in the editor.
• language the initial language of the auto created model in the editor. Defaults to javascript.
• theme the theme of the editor. Defaults to vs.
• options refer to Monaco interface IEditorConstructionOptions.
• change(newValue, event) an event emitted when the content of the current model has changed.
• editorBeforeMount(monaco) an event emitted before the editor mounted (similar to beforeMount of Vue).
• editorMounted(editor, monaco) an event emitted when the editor has been mounted (similar to mounted of Vue).

Events & Methods

Refer to Monaco interface IEditor.

Use multiple themes

Monaco only supports one theme.

How to use the diff editor

<template>
  <div id="app">
    <MonacoEditor
      :diffEditor="true"
      original="..."
      //...
    ></MonacoEditor>
  </div>
</template>