<MonacoEditor>

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

<MonacoEditor />

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

lang

• Default: plaintext

A programming language for colorization, which will override the editor's option options.language.

Available languages are listed here.

options

• Default: {}

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.

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 instanc by using ref and $editor.

<template>
  <MonacoEditor ref="editorRef" />
</template>
<script lang="ts" setup>
import { MonacoEditor } from '#build/components'
const editorRef = ref<InstanceType<typeof MonacoEditor>>()
// For example, add greeting action to editor...
editorRef.value?.$editor.addAction({
  id: 'hello-world',
  label: 'Hello world',
  run: function (ed) {
    alert('Hello world!')
  }
})
</script>