<MonacoEditor>
As if it were an <input>
or <textarea>
, you can easily use <MonacoEditor>
component to show the editor.
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>