@guolao/vue-monaco-editor

monaco-vue

🎉 version v1 support vue 2&3 now ✌

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

English | 简体中文

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.

Installation

npm i @guolao/vue-monaco-editor

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

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

Of course, you can also use unpkg.

Usage

Register the component.

import { createApp } from 'vue'
import { install as VueMonacoEditorPlugin } from '@guolao/vue-monaco-editor'

const app = createApp(App)
app.use(VueMonacoEditorPlugin, {
  paths: {
    // The recommended CDN config
    vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.43.0/min/vs'
  },
})

And then, use it.

Editor

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

<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>

Diff Editor

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

<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>

Props & Events & slots

Editor

Name	Type	Default	Description	remark
value	string		value of the current model, can use v-model:value	v-model:value
language	string		all language of the current model	languages supported by monaco-editor, view here
path	string		path to the current model
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))
theme	vs | vs-dark	vs	the theme for the monaco editor.
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
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, event: monaco.editor.IModelContentChangedEvent) => void		execute when the changed value change
onValidate	(markers: monaco.editor.IMarker[]) => void		execute when a syntax error occurs	monaco-editor supports syntax-checked languages view here
#default	slot	'loading...'	loading status	when loading files from CDN, displaying the loading status will be more friendly
#failure	slot	'load failed'	failure status	example: CDN network error

Diff Editor

Name	Type	Default	Description
original	string		The original source value (left editor)
modified	string		The modified source value (right editor)
language	string		Language for the both models - original and modified (all languages that are supported by monaco-editor)
originalLanguage	string		This prop gives you the opportunity to specify the language of the original source separately, otherwise, it will get the value of the language property.
modifiedLanguage	string		This prop gives you the opportunity to specify the language of the modified source separately, otherwise, it will get the value of language property.
originalModelPath	string		Path for the "original" model. Will be passed as a third argument to .createModel method - monaco.editor.createModel(..., ..., monaco.Uri.parse(originalModelPath))
modifiedModelPath	string		Path for the "modified" model. Will be passed as a third argument to .createModel method - monaco.editor.createModel(..., ..., monaco.Uri.parse(modifiedModelPath))
theme	vs | vs-dark | string	vs (vs theme equals light theme)	The theme for the monaco editor. Define new themes by monaco.editor.defineTheme.
options	object	{}	IStandaloneDiffEditorConstructionOptions
width	number | string	100%	Container width
height	number | string	100%	Container height
className	string		Container class name
onBeforeMount	(monaco: Monaco) => void		Execute before the editor instance is created
onMount	(editor: monaco.editor.IStandaloneDiffEditor, monaco: Monaco) => void		Execute after the editor instance has been created
#default	slot	'loading...'	Loading status
#failure	slot	'load failed'	Failure status

Hooks

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

<template>
  <div ref="containerRef"></div>
</template>

<script lang="ts" setup>
import { ref, onUnmounted, watchEffect, nextTick } from 'vue'
import { useMonaco } from '@guolao/vue-monaco-editor'

const containerRef = ref()
const { monacoRef, unload } = useMonaco()

// watch once
const stop = watchEffect(() => {
  if (monacoRef.value && containerRef.value) {
    nextTick(() => stop())
    monacoRef.value.editor.create(containerRef.value, { ... })
  }
})

/*
  When the component will be unmount,
  If the monaco instance is not successfully loaded,
  You need to manually unload.
*/
onUnmounted(() => !monacoRef.value && unload())
</script>

CDN

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

The configuration of loader is global, only to be configured once.

import { createApp } from 'vue'
import { install as VueMonacoEditorPlugin } from '@guolao/vue-monaco-editor'

const app = createApp(App)
app.use(VueMonacoEditorPlugin, {
  paths: {
    // The recommended CDN config
    vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.43.0/min/vs'
  },
})

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

// loaded from CDN
loader.config({
  paths: {
    vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.43.0/min/vs'
  },
})

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

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

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.

Inspiration

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

• monaco-loader
• monaco-react

License

MIT