<MonacoEditor>

As if it were an <input> or <textarea>, you can easily use <MonacoEditor> component to show the editor.

Preview

Code

Get & Set value

<template>
  <MonacoEditor
 v-model
="value
" />
</template>

<script lang="ts" setup>
const value
 = ref
('')
</script>

Fallback Content

<template>
  <MonacoEditor>
    Loading...
  </MonacoEditor>
</template>

Children of <MonacoEditor> 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.

optionsIStandaloneEditorConstructionOptions

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.

modelUrimonaco.Uri

The URI that identifies models.

Events

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

load

Emitted with an instance of IStandaloneCodeEditor when the editor is loaded

`Ref` of `<MonacoEditor>`

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

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

<script lang="ts" setup>
import { MonacoEditor
 } from '#components'
const editorRef
 = useTemplateRef
<InstanceType
<typeof MonacoEditor
>>('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>

Customize UI

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

On This Page

Star on GitHub Create Issues