monaco-vue

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

English Documents | 中文文档

View Demo.

If you want to use monaco-editor as NPM Package to load monaco-editor files from node_modules to package into your code, you still need to Use the plugin for the packaging tool, viewed here.

Contents

• Contents
• Installation
• Usage
  • Editor Component
  • editor instance
  • monaco instance
    • onBeforeMount & onMount Event
    • useMonaco hook
    • Use loader
• CDN
• NPM Package
  • Vite
  • Rollup
  • Webpack
• Props & Events & slots
• License

Installation

# npm
npm i @guolao/vue-monaco-editor

# yarn
yarn add @guolao/vue-monaco-editor

# pnpm
pnpm add @guolao/vue-monaco-editor

Of course, you can also use unpkg.

Usage

Editor Component

Just import the Editor component and use it.

import { defineComponent } from 'vue'
import Editor from '@guolao/vue-monaco-editor'

export default defineComponent(() => {
  return (
    <Editor 
      height="80vh"
      theme='vs-dark'
      defaultLanguage="javascript"
      defaultValue="// some comment"
      onChange={(val, event) => console.log(val, event)}
    />
  )
})

editor instance

Get the editor instance from the onMount event.

import { defineComponent, ref } from 'vue'
import Editor from '@guolao/vue-monaco-editor'

export default defineComponent(() => {
  const editorRef = ref()

  function handleEditorMount(editor) {
    // get the editor instance here
    editorRef.value = editor
  }

  return (
    <Editor 
      height="80vh"
      theme='vs-dark'
      defaultLanguage="javascript"
      defaultValue="// some comment"
      onMount={handleEditorMount}
    />
  )
})

monaco instance

onBeforeMount & onMount Event

Get the monaco-editor instance from the onBeforeMount or onMount event.

import { defineComponent, ref } from 'vue'
import Editor from '@guolao/vue-monaco-editor'

export default defineComponent(() => {
  const monacoRef = ref()

  function handleMonacoBeforeMount(monaco) {
    // get the monaco instance here
    monacoRef.value = editor
  }

  function handleMonacoMount(editor, monaco) {
    // get the monaco instance here
    monacoRef.value = editor
  }

  return (
    <Editor 
      height="80vh"
      theme='vs-dark'
      defaultLanguage="javascript"
      defaultValue="// some comment"
      onBeforeMount={handleMonacoBeforeMount}
      onMount={handleEditorMount}
    />
  )
})

useMonaco hook

vue-monaco-editor provides useMonaco to load the monaco-editor.

useMonaco use @monaco-editor/loader to load monaco-editor from the CDN.

Note that useMonaco only loads and exports monaco instances and still needs to be used with the Editor component, or you can use monaco instances to create editor instances manually.

import { defineComponent, onUnmounted } from 'vue'
import Editor, { useMonaco } from '@guolao/vue-monaco-editor'

export default defineComponent(() => {
  const { monacoRef, unload } = useMonaco()
  
  /*
    When the component will be unmount,
    If the monaco instance is not successfully loaded,
    You need to manually unload.
  */
  onUnmounted(() => !monacoRef.value && unload())

  return (
    <Editor 
      height="80vh"
      theme='vs-dark'
      defaultLanguage="javascript"
      defaultValue="// some comment"
    />
  )
})

Use loader

You can use @monaco-editor/loader to load the monaco instance directly from the CDN (the loading process of loader is asynchronous).

The configuration for @monaco-editor/loader can be viewed here.

import { loader } from "@guolao/vue-monaco-editor"

// loaded from CDN
loader.config({ 
  paths: { 
    vs: 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs' 
  },
})

// configurable for different languages
loader.config({ "vs/nls": { availableLanguages: { "*": "de" } } })

// or
loader.config({
  paths: {
    vs: "...",
  },
  "vs/nls" : {
    availableLanguages: {
      "*": "de",
    },
  },
})

CDN

vue-monaco-editor use @monaco-editor/loader to load the monaco-editor from the CDN, the default CDN is jsdelivr.

loader.config({ 
  paths: { 
    vs: 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs' 
  },
})

If you have other needs, you can modify the configuration to load the monaco-editor related files from other places.

Please see @monaco-editor/loader for the specific configuration.

NPM Package

If you want to use monaco-editor as NPM Package to load monaco-editor files from node_modules to package into your code, you still need to use the plugin for the packaging tool.

import * as monaco from "monaco-editor"
import { loader } from "@guolao/vue-monaco-editor"

// loaded monaco-editor from `node_modules`
loader.config({ monaco })

Vite

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

import { loader } from "@guolao/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 })

Rollup

If you use Rollup, you can use the community provided plugin rollup-plugin-monaco-editor.

Webpack

If you use webpack, monaco-editor officially provides the webpack plugin monaco-editor-webpack-plugin, which you can use.

Props & Events & slots

Editor

| Name | Type | Default | Description | remark | | --- | --- | --- | --- | --- | | defaultValue | string | | default value of the current model | | | defaultLanguage | string | | default language of the current model | languages supported by monaco-editor view here | | defaultPath | string | | default path of the current model | monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath)) | | value | string | | value of the current model | v-model:value | | language | string | | language of the current model | languages supported by monaco-editor view here | | path | string | | path to the current model | | | theme | light | vs-dark | light | theme of the monaco-editor | monaco.editor.defineTheme(...) | | line | number | | number of lines to jump to | | | options | object | {} | IStandaloneEditorConstructionOptions | | | overrideServices | object | {} | IEditorOverrideServices | | | saveViewState | boolean | true | save the view state of the model (scroll position, etc.) after model changes | a unique path needs to be configured for each model | | width | number | string | 100% | container width | | | height | number | string | 100% | container height | | | className | string | | container class name | | | onUpdate:value | (value: string \| undefined) => void | | execute when the changed value change | can use v-model | | onBeforeMount | (monaco: Monaco) => void | | execute before the editor instance is created | | | onMount | (editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => void | | execute after the editor instance has been created | | | onChange | (value: string \| undefined) => void | | execute when the changed value change | monaco.editor.IModelContentChangedEvent) => void | | onValidate | (markers: monaco.editor.IMarker[]) => void | | execute when a syntax error occurs | monaco-editor supports syntax-checked languages view here | | #defalut | slot | 'loading...' | loading status | when loading files from CDN, displaying the loading status will be more friendly |

License

MIT