vue-monaco-cdn

vue-monaco-cdn

This is a version for Vue3. To get version for Vue2, please use vue-monaco-cdn^1.0.0 (branch v1.x)

Monaco Editor is the code editor that powers VS Code. This project aims to provide simple and lightweight Vue.js component, that downloads editor files lazily from cdn. Forked from vue-monaco and adjusted to use CDN with minimal setup.

Similar projects:

• vue-monaco - requires bundling monaco editor files via webpack and a special webpack plugin. Sometimes this may be undesirable because:
  • it requires additional webpack configuration
  • webpack processing can lead to issues
  • it can significantly increase webpack bundle size and build time.
• vue-monaco-editor - supports CDN but isn't maintained.

Install

yarn add vue-monaco-cdn
# or
npm install vue-monaco-cdn

Usage

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

<script>
import MonacoEditor from 'vue-monaco-cdn'

export default {
  components: {
    MonacoEditor
  },

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

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

Props

• modelValue - code
• language - programming language that code will be in. List of supported languages
• theme - visual theme for editor
• options - monaco editor additional options
• url - custom CDN url. Default is "https://unpkg.com/browse/monaco-editor@latest/min". Note, that URL must point to a folder, under which path "/vs/base/worker/workerMain.js" must exist.

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.

Events

• editorDidMount - fired after monaco editor was mounted. Recieves monaco instance (IStandaloneCodeEditor) as parameter. Use this event to customize monaco instance (for example, add new code formatters)
• update:modelValue - fired whenever user changes editor content

For other events, please use getMonaco() and subscribe to them directly. See IStandaloneCodeEditor reference for full events list.

Author

vue-monaco-cli. Released under the MIT License.

Authored and maintained by leo-buneev and contributors. Huge thanks to egoist for initial webpack version.