Skip to content

FE-Mars/monaco-editor-vue

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.
  • editorBeforeMount(monaco) The function called before the editor mounted (similar to beforeMount of Vue).
  • editorMounted(editor, monaco) The function called when the editor has been mounted (similar to mounted of Vue).
  • change(newValue, event) an event emitted when the content of the current model has changed.

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>

About

Monaco Editor for Vue.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •