<MonacoDiffEditor>
To show differences between two files, you can use <MonacoDiffEditor>
component.
Usage of <MonacoDiffEditor>
is almost the same as <MonacoEditor>
.
Get & Set values
<template>
<MonacoDiffEditor :original="originalValue" v-model="modifiedValue" />
</template>
<script lang="ts" setup>
const originalValue = ref('Original Value')
const modifiedValue = ref('Modified Value')
</script>
v-model
is for the modified value. Original value is read-only in monaco-editor.
Fallback Content
<template>
<MonacoDiffEditor>
Loading...
</MonacoDiffEditor>
</template>
Children of <MonacoDiffEditor>
will be shown until the editor is loaded.
Props
lang
- Default:
plaintext
A programming language for colorization, which will override the editor's option options.language
.
Available languages are listed here.
options
- Default:
{ automaticLayout: true }
Options passed to the second argument of monaco.editor.createDiffEditor
.
You can also change the options after the editor mounted.
Available options are listed here.
Events
interface Emits {
(event: 'update:modelValue', value: string): void
(event: 'load', editor: monaco.editor.IStandaloneDiffEditor): void
}
load
Emitted with an instance of IStandaloneDiffEditor
when the editor is loaded
Ref
of <MonacoDiffEditor>
You can access to the editor instanc by using ref
and $editor
.
<template>
<MonacoDiffEditor ref="editorRef" />
</template>
<script lang="ts" setup>
import { MonacoEditor } from '#build/components'
const editorRef = ref<InstanceType<typeof MonacoDiffEditor>>()
// For example, add greeting action to editor...
editorRef.value?.$editor.addAction({
id: 'hello-world',
label: 'Hello world',
run: function (ed) {
alert('Hello world!')
}
})
</script>