vue-monaco

Monaco Editor is the code editor that powers VS Code.

Install

yarn add vue-monaco

Usage

You need to include monaco-editor first.

Then use the component:

<script src="/path/to/monaco-editor/min/vs/loader.js"></script>
<script>
  require.config({ 
    paths: { 
      vs: '/path/to/monaco-editor/min/vs'
    }
  })
</script>

<template>
  <monaco-editor
    v-model="code"
    language="javascript">
  </monaco-editor>
</template>

<script>
import MonacoEditor from 'vue-monaco'

export default {
  components: {
    MonacoEditor
  },

  data() {
    return {
      code: 'const noop = () => {}'
    }
  }
}
</script>

Props

• code
• language
• theme
• options

Events

• change: Emitted when the value is changed, args:
  • newValue
• focus: Emitted when the editor is focused.
• blur: Emitted when the editor loses focus.

Methods

• getMonaco(): IStandaloneCodeEditor: Return the editor instance.

Use ref to interact with the MonacoEditor component in order to access methods: <MonacoEditor ref="editor"></MonacoEditor>, then this.$refs.editor.getMonaco() will be available.

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Author

vue-monaco © egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).

egoist.moe · GitHub @egoist · Twitter @_egoistlily