monaco-editor-vue

    1.0.10 • Public • Published

    monaco-editor-vue

    Monaco Editor for Vue.

    NPM version Downloads

    monaco-editor-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>

    Install

    npm i monaco-editor-vue

    DownloadsWeekly Downloads

    807

    Version

    1.0.10

    License

    MIT

    Unpacked Size

    14.4 kB

    Total Files

    4

    Last publish

    Collaborators

    • jwang