@duxet/vue-monaco v0.3.0

vue-monaco

Monaco Editor is the code editor that powers VS Code.

Install

yarn add vue-monaco

Usage

To use with webpack:

// webpack.config.js
const MonocoEditorPlugin = require('monaco-editor-webpack-plugin')

module.exports = {
  plugins: [
    new MonocoEditorPlugin()
  ]
}

Then use the component:

<template>
  <monaco-editor
    class="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>

<style>
.editor {
  width: 600px;
  height: 800px;
}
</style>

Props

• code
• language
• theme
• options

Events

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