@vue-monaco/editor

Use monaco-editor loaded in Vue 2&3, no need to configure plugins in webpack (or rollup, vite) and other packaging tools.

English | 简体中文

Installation

npm i @vue-monaco/editor

Vue <= 2.6.14 requires @vue/composition-api to be installed.

npm i @vue-monaco/editor @vue/composition-api

Usage

Editor

<script lang="ts" setup>
  import { ref, shallowRef } from 'vue'

  const MONACO_EDITOR_OPTIONS = {
    automaticLayout: true,
    formatOnType: true,
    formatOnPaste: true,
  }

  const code = ref('// some code...')
  const editorRef = shallowRef()
  const handleMount = editor => (editorRef.value = editor)

  // your action
  function formatCode() {
    editorRef.value?.getAction('editor.action.formatDocument').run()
  }
</script>

<template>
  <monaco-editor
    v-model:value="code"
    theme="vs-dark"
    :options="MONACO_EDITOR_OPTIONS"
    @mount="handleMount"
  />
</template>

Diff Editor

<script lang="ts" setup>
  import { ref, shallowRef } from 'vue'

  const OPTIONS = {
    automaticLayout: true,
    formatOnType: true,
    formatOnPaste: true,
    readOnly: true,
  }

  const diffEditorRef = shallowRef()
  const handleMount = diffEditor => (diffEditorRef.value = diffEditor)

  // get the original value
  function getOriginalValue() {
    return diffEditorRef.value.getOriginalEditor().getValue()
  }

  // get the modified value
  function getOriginalValue() {
    return diffEditorRef.value.getModifiedEditor().getValue()
  }
</script>

<template>
  <monaco-diff-editor
    theme="vs-dark"
    original="// the original code"
    modified="// the modified code"
    language="javascript"
    :options="OPTIONS"
    @mount="handleMount"
  />
</template>

Props & Events & slots

Editor

Diff Editor

Vite

If you use vite, you need to do this (see #1791 (comment) for details).

import { loader } from '@vue-monaco/editor'

import * as monaco from 'monaco-editor'
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'

self.MonacoEnvironment = {
  getWorker(_, label) {
    if (label === 'json')
      return new jsonWorker()

    if (label === 'css' || label === 'scss' || label === 'less')
      return new cssWorker()

    if (label === 'html' || label === 'handlebars' || label === 'razor')
      return new htmlWorker()

    if (label === 'typescript' || label === 'javascript')
      return new tsWorker()

    return new editorWorker()
  }
}

loader.config({ monaco })

Inspiration

MonacoVue is made possible thanks to the inspirations from the following projects:

• monaco-loader
• monaco-vue

License

MIT