Awesome Open Source
Awesome Open Source


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

Monaco Editor Vue Component

Based off React Monaco Editor



npm install vue-monaco-editor --save

Simple Vue Use

import MonacoEditor from 'vue-monaco-editor'

// use in component
export default {
  components: {

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


Component Implementation



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

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

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
vue (4,271
editor (482
editor-plugin (23
monaco-editor (23