VUE 3 Monaco Editor

MonacoEditor.vue

<template>
    <div style="width: 100%;height: 100%;"></div>
</template>

<script>
import * as monaco from 'monaco-editor';

export default {
    name: 'MonacoEditor',
    props: {
        modelValue: {default: ''},
        language: {type: String, required: true},
        theme: {type: String, default: 'vs-dark'},
        options: {type: Object, default: () => ({})},
    },

    data() {
        return {};
    },

    methods: {},

    watch: {
        modelValue() {
            if (!this.editor) return;
            this.modelValue !== this.editor.getValue() && this.editor.setValue(this.modelValue);
        },
        language() {
            if (!this.editor) return;
            monaco.editor.setModelLanguage(this.editor.getModel(), this.language);
        },
        theme() {
            monaco.editor.setTheme(this.theme);
        },
        options: {
            deep: true,
            handler(options) {
                this.editor.updateOptions(options);
            }
        },
    },

    mounted() {
        this.editor = monaco.editor.create(this.$el, {
            value: this.modelValue,
            language: this.language,
            theme: this.theme,
            ...this.options,
        });

        this.editor.onDidChangeModelContent(evt => {
            let val = this.editor.getValue();
            if (this.modelValue !== val) {
                this.$emit('update:modelValue', val, evt);
            }
        });
    },

    beforeUnmount() {
        this.editor && this.editor.dispose();
    }
}
</script>

<style scoped>

</style>