Nice Philanthropist Metalhead

    vue-monaco-editor-fis

    0.0.4 • Public • Published

    vue-monaco-editor

    Monaco Editor Vue Component

    Based off React Monaco Editor Vue Monaco Editor

    experimental

    Setup

    npm install vue-monaco-editor-fis --save

    Simple Vue Use

    import MonacoEditor from 'vue-monaco-editor-fis'
     
    // use in component
    export default {
      components: {
        MonacoEditor
      }
    }

    Component Props

    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
    highlighted Array[Object] [{ number: 0, class: ''}] Lines to highlight with numbers and .classes
    changeThrottle Number(ms) 0 throttle codeChange emit
    srcPath String "" see Webpack Use below
    editorOptions Object Merged with defaults below See Monaco Editor Options

    Editor Default Options

    defaults: {
      selectOnLineNumbers: true,
      roundedSelection: false,
      readOnly: false,
      cursorStyle: 'line',
      automaticLayout: false,
      glyphMargin: true
    }

    Component Events

    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

    Example

    Component Implementation

    <MonacoEditor
        height="600"
        language="json"
        :code="code"
        :editorOptions="options"
        @mounted="onMounted"
        @codeChange="onCodeChange"
        >
    </MonacoEditor>

    Parent

    module.exports = {
      components: {
        Monaco
      },
      data() {
        return {
          code: '// Type away! \n',
          options: {
            selectOnLineNumbers: false
          }
        };
      },
      methods: {
        onMounted(editor) {
          this.editor = editor;
        },
        onCodeChange(editor) {
          console.log(this.editor.getValue());
        }
      }
    };

    Keywords

    none

    Install

    npm i vue-monaco-editor-fis

    DownloadsWeekly Downloads

    4

    Version

    0.0.4

    License

    ISC

    Last publish

    Collaborators

    • jinzhan