Use monaco-editor loaded from CDN in Vue 2&3, no need to bundling.
English | 简体ä¸ć–‡
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.
npm i @guolao/vue-monaco-editorVue <= 2.6.14 requires @vue/composition-api to be installed.
npm i @guolao/vue-monaco-editor @vue/composition-apiDon't forget to register the @vue/composition-api plugin!
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)Of course, you can also use unpkg.
Global Registration
import { createApp } from 'vue'
import { install as VueMonacoEditorPlugin } from '@guolao/vue-monaco-editor'
const app = createApp(App)
app.use(VueMonacoEditorPlugin, {
paths: {
// You can change the CDN config to load other versions
vs: 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs'
},
})Local Registration
// main.ts
import { loader } from '@guolao/vue-monaco-editor'
loader.config({
paths: {
vs: 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs',
},
})
// editor.vue
import { VueMonacoEditor } from '@guolao/vue-monaco-editor'
export default {
components: { VueMonacoEditor },
}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 editor = shallowRef()
const handleMount = editorInstance => (editor.value = editorInstance)
// your action
function formatCode() {
editor.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 diffEditor = shallowRef()
const handleMount = diffEditorInstance => (diffEditor.value = diffEditorInstance)
// get the original value
function getOriginalValue() {
return diffEditor.value.getOriginalEditor().getValue()
}
// get the modified value
function getModifiedValue() {
return diffEditor.value.getModifiedEditor().getValue()
}
</script>| 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 |
| 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 |
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>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: {
// You can change the CDN config to load other versions
vs: 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs'
},
})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",
},
},
})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.
import * as monaco from "monaco-editor"
import { loader } from "@guolao/vue-monaco-editor"
// loaded monaco-editor from `node_modules`
loader.config({ monaco })If you are using 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 })If you are using Rollup, you can use the community provided plugin rollup-plugin-monaco-editor.
If you are using webpack, monaco-editor officially provides a webpack plugin called monaco-editor-webpack-plugin, which you can install and use.
MonacoVue is made possible thanks to the inspirations from the following projects:
