Monaco Editor Vue Component
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src Watch language prop when value has changed the editor will set new sy… Jun 20, 2017
.babelrc 👽 Dec 22, 2016
.gitignore 👽 Dec 22, 2016
LICENSE.md Create LICENSE.md Dec 28, 2016
README.md Update README.md Feb 13, 2018
index.html 👽 Dec 22, 2016
index.js Export correctly Dec 23, 2016
package.json 0.0.18 Dec 31, 2016
webpack.config.js Load via webpack Dec 28, 2016

README.md

vue-monaco-editor

!!!! This is not maintained !!!!

Monaco Editor Vue Component

Based off React Monaco Editor

experimental

Setup

npm install vue-monaco-editor --save

Simple Vue Use

import MonacoEditor from 'vue-monaco-editor'

// 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="typescript"
    :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(editor.getValue());
    }
  }
};

Webpack Use

By default, monaco-editor is loaded from a cdn asyncronously using require. To use a local copy of monaco-editor with webpack, we need to expose the dependency in our build directory:

npm install copy-webpack-plugin --save-dev

Add this to your webpack.config.js:

const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
  plugins: [
    new CopyWebpackPlugin([
      {
        from: 'node_modules/monaco-editor/min/vs',
        to: 'vs',
      }
    ])
  ]
};

Then, specify the build directory path in the srcPath prop. See src/App.vue for an example.

Dev Use

git clone [this repo] .
npm install
npm run dev

Edit src/App.vue