Skip to content

Monaco editor component for vue.js. Downloads editor files lazily from CDN.

License

Notifications You must be signed in to change notification settings

leo-buneev/vue-monaco-cdn

Repository files navigation

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

Methods

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.

About

Monaco editor component for vue.js. Downloads editor files lazily from CDN.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published