<MonacoDiffEditor>

To show differences between two files, you can use <MonacoDiffEditor> component.

Usage of <MonacoDiffEditor> is almost the same as <MonacoEditor>.

Preview
Code

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

langstring
plaintext

A programming language for colorization, which will override the editor's option options.language.
Available languages are listed here.

optionsIStandaloneDiffEditorConstructionOptions

Options passed to the second argument of monaco.editor.create. You can also change the options after the editor mounted.
Available options are listed here.

originalstring

Original value showed in the editor.

modelUrimonaco.Uri

The URI that identifies models.

originalModelUrimonaco.Uri

The URI that identifies models.

Events

interface 
Emits
 {
  (
event
: 'update:modelValue', 
value
: string): void
  (
event
: 'load', 
editor
: 
monaco
.
editor
.
IStandaloneDiffEditor
): void
}
load

Emitted with an instance of IStandaloneCodeEditor when the editor is loaded

Ref of <MonacoDiffEditor>

You can access to the editor instance by using useTemplateRef(or ref) and $editor.

<template>
  <
MonacoDiffEditor
 
ref
="
editorRef
" />
</template>

<script lang="ts" setup>
import { 
MonacoEditor
 } from '#components'
const 
editorRef
 = 
useTemplateRef
<
InstanceType
<typeof MonacoDiffEditor>>('editorRef')

// For example, add greeting action to editor...

editorRef
.
value
?.
$editor
.
addAction
({
  
id
: 'hello-world',
  
label
: 'Hello world',
  
run
: function (
ed
) {
    
alert
('Hello world!')
  }
})
</script>
<MonacoEditor>
As if it were an <input> or <textarea>, you can easily use <MonacoEditor> component to show the editor.
useMonaco
Get monaco namespace, the same as to do import * as monaco from 'monaco-editor'.