monaco-vue

Use monaco-editor loaded from CDN in Vue 2&3, no need to bundling.

English | 简体中文

Why

The monaco-editor doesn't support ESM very well, which results in large files when the code is bundled.

But the official team has written a loader to lazy load files of the editor remotely, so we can load the files from a CDN to use it.

If you still want to import monaco-editor files from node_modules and bundle them into your code (without using remote loading), you will need to use a bundling tool. See here.

Installation

1npm i @guolao/vue-monaco-editor

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

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

Don't forget to register the @vue/composition-api plugin!

1import Vue from 'vue'
2import VueCompositionAPI from '@vue/composition-api'
3
4Vue.use(VueCompositionAPI)

Of course, you can also use unpkg.

Usage

Global Registration

1import { createApp } from 'vue'
2import { install as VueMonacoEditorPlugin } from '@guolao/vue-monaco-editor'
3
4const app = createApp(App)
5app.use(VueMonacoEditorPlugin, {
6  paths: {
7    // You can change the CDN config to load other versions
8    vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/min/vs'
9  },
10})

Local Registration

1// main.ts
2import { loader } from '@guolao/vue-monaco-editor'
3loader.config({
4  paths: {
5    vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/min/vs',
6  },
7})
8
9// editor.vue
10import { VueMonacoEditor } from '@guolao/vue-monaco-editor'
11export default {
12  components: { VueMonacoEditor },
13}

And then, use it.

Editor

1<template>
2  <vue-monaco-editor
3    v-model:value="code"
4    theme="vs-dark"
5    :options="MONACO_EDITOR_OPTIONS"
6    @mount="handleMount"
7  />
8</template>
9
10<script lang="ts" setup>
11import { ref, shallowRef } from 'vue'
12
13const MONACO_EDITOR_OPTIONS = {
14  automaticLayout: true,
15  formatOnType: true,
16  formatOnPaste: true,
17}
18
19const code = ref('// some code...')
20const editor = shallowRef()
21const handleMount = editorInstance => (editor.value = editorInstance)
22
23// your action
24function formatCode() {
25  editor.value?.getAction('editor.action.formatDocument').run()
26}
27</script>

Diff Editor

1<template>
2  <vue-monaco-diff-editor
3    theme="vs-dark"
4    original="// the original code"
5    modified="// the modified code"
6    language="javascript"
7    :options="OPTIONS"
8    @mount="handleMount"
9  />
10</template>
11
12<script lang="ts" setup>
13import { ref, shallowRef } from 'vue'
14
15const OPTIONS = {
16  automaticLayout: true,
17  formatOnType: true,
18  formatOnPaste: true,
19  readOnly: true,
20}
21
22const diffEditor = shallowRef()
23const handleMount = diffEditorInstance => (diffEditor.value = diffEditorInstance)
24
25// get the original value
26function getOriginalValue() {
27  return diffEditor.value.getOriginalEditor().getValue()
28}
29
30// get the modified value
31function getModifiedValue() {
32  return diffEditor.value.getModifiedEditor().getValue()
33}
34</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		inner container class name
@beforeMount	(monaco: Monaco) => void		execute before the editor instance is created (don't use @before-mount in vue2, detail)
@mount	(editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => void		execute after the editor instance has been created
@change	(value: string | undefined, event: monaco.editor.IModelContentChangedEvent) => void		execute when the changed value change
@validate	(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		Inner container class name
@beforeMount	(monaco: Monaco) => void		Execute before the editor instance is created (don't use @before-mount in vue2, detail)
@mount	(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.

1<template>
2  <div ref="containerRef"></div>
3</template>
4
5<script lang="ts" setup>
6import { ref, onUnmounted, watchEffect, nextTick } from 'vue'
7import { useMonaco } from '@guolao/vue-monaco-editor'
8
9const containerRef = ref()
10const { monacoRef, unload } = useMonaco()
11
12// watch once
13const stop = watchEffect(() => {
14  if (monacoRef.value && containerRef.value) {
15    nextTick(() => stop())
16    monacoRef.value.editor.create(containerRef.value, { ... })
17  }
18})
19
20/*
21  When the component will be unmount,
22  If the monaco instance is not successfully loaded,
23  You need to manually unload.
24*/
25onUnmounted(() => !monacoRef.value && unload())
26</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.

1import { createApp } from 'vue'
2import { install as VueMonacoEditorPlugin } from '@guolao/vue-monaco-editor'
3
4const app = createApp(App)
5app.use(VueMonacoEditorPlugin, {
6  paths: {
7    // You can change the CDN config to load other versions
8    vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/min/vs'
9  },
10})

1import { loader } from "@guolao/vue-monaco-editor"
2
3// loaded from CDN
4loader.config({
5  paths: {
6    vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/min/vs'
7  },
8})
9
10// configurable for different languages
11loader.config({ "vs/nls": { availableLanguages: { "*": "de" } } })
12
13// or
14loader.config({
15  paths: {
16    vs: "...",
17  },
18  "vs/nls" : {
19    availableLanguages: {
20      "*": "de",
21    },
22  },
23})

NPM Package

If you still want to import monaco-editor files from node_modules and bundle them into your code (without using remote loading), you will need to use a bundling tool.

1import * as monaco from "monaco-editor"
2import { loader } from "@guolao/vue-monaco-editor"
3
4// loaded monaco-editor from `node_modules`
5loader.config({ monaco })

Vite

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

1import { loader } from "@guolao/vue-monaco-editor"
2
3import * as monaco from "monaco-editor"
4import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker"
5import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker"
6import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker"
7import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker"
8import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker"
9
10self.MonacoEnvironment = {
11  getWorker(_, label) {
12    if (label === "json") {
13      return new jsonWorker()
14    }
15    if (label === "css" || label === "scss" || label === "less") {
16      return new cssWorker()
17    }
18    if (label === "html" || label === "handlebars" || label === "razor") {
19      return new htmlWorker()
20    }
21    if (label === "typescript" || label === "javascript") {
22      return new tsWorker()
23    }
24    return new editorWorker()
25  }
26}
27
28loader.config({ monaco })

Rollup

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

Webpack

If you are using webpack, monaco-editor officially provides a webpack plugin called monaco-editor-webpack-plugin, which you can install and use.

Inspiration

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

• monaco-loader
• monaco-react

License

MIT