@amoayun/monaco-editor-vue3

Feature Support

• ✅ ✨Two modes: diff (code comparison editor), base (regular code editor)
• ✅ ✨Two-way data binding: supports v-model, v-model:originalData, v-model:modifiedData
• ✅ ✨Multiple themes: vs, vs-dark, hc-black, hc-light
• ✅ ✨Multiple language highlighting: JSON, CSS, SCSS, LESS, HTML, TypeScript, JavaScript, etc.
• ✅ ✨Multiple language code suggestions and customizable code suggestions
• ✅ ✨Insert text
• ✅ ✨Real-time content selection
• ✅ ✨Elimination of monaco-editor side effects
• More features can be experienced in the Online Demo

Online Demo

For more features, please visit the Online Demo

Quick Start

1. Install dependencies

npm i @amoayun/monaco-editor-vue3

2. The component relies on Microsoft's monaco-editor, so you need to install it

npm i monaco-editor

3. Code Import

   Note: In diff mode, you need to pass two v-model values: originalData and modifiedData, instead of the default modelValue (see Props in the Advanced Usage section for details).

<template>
    <div>
        <AmoAYunMonacoEditorVue3 v-model="content" language="javascript"  style="width: 100%;height: 400px;" />
    </div>
</template>

<script setup lang="ts">
    import { ref } from "vue";
    import { AmoAYunMonacoEditorVue3 } from "@amoayun/monaco-editor-vue3";
    import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
    import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
    import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
    import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
    import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";

    self.MonacoEnvironment = {
        getWorker(_, label) {
            switch (label) {
                case "json":
                    return new jsonWorker();
                case "css":
                case "scss":
                case "less":
                    return new cssWorker();
                case "html":
                case "handlebars":
                case "razor":
                    return new htmlWorker();
                case "typescript":
                case "javascript":
                    return new tsWorker();
                default:
                    return new editorWorker();
            }
        },
    };

    const content = ref("");
</script>

Advanced Usage

Props

Events

• Example Usage:

<template>
    <div>
        <AmoAYunMonacoEditorVue3 v-model="content" language="javascript" style="width: 100%;height: 400px;" @select="handleSelect" />
    </div>
</template>

<script setup lang="ts">
    import { ref } from "vue";
    import { AmoAYunMonacoEditorVue3 } from "@amoayun/monaco-editor-vue3";
    import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
    import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
    import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
    import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
    import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";

    self.MonacoEnvironment = {
        getWorker(_, label) {
            switch (label) {
                case "json":
                    return new jsonWorker();
                case "css":
                case "scss":
                case "less":
                    return new cssWorker();
                case "html":
                case "handlebars":
                case "razor":
                    return new htmlWorker();
                case "typescript":
                case "javascript":
                    return new tsWorker();
                default:
                    return new editorWorker();
            }
        },
    };

    const content = ref("");

    const handleSelect = (value: string) => {
        console.log(value);
    };
</script>

Methods

• Example Usage:

<template>
    <div>
        <AmoAYunMonacoEditorVue3 v-model="content" language="javascript" style="width: 100%;height: 400px;" ref="editor" />
        <button @click="handleInsert">Insert Content</button>
    </div>
</template>

<script setup lang="ts">
    import { ref } from "vue";
    import { AmoAYunMonacoEditorVue3 } from "@amoayun/monaco-editor-vue3";
    import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
    import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
    import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
    import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
    import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";

    self.MonacoEnvironment = {
        getWorker(_, label) {
            switch (label) {
                case "json":
                    return new jsonWorker();
                case "css":
                case "scss":
                case "less":
                    return new cssWorker();
                case "html":
                case "handlebars":
                case "razor":
                    return new htmlWorker();
                case "typescript":
                case "javascript":
                    return new tsWorker();
                default:
                    return new editorWorker();
            }
        },
    };

    const content = ref<string>("");
    const editor = ref<any>(null);

    const handleInsert = () => {
        editor.value?.insertText("hello world");
    };
</script>

Type

ConfigOptions

SuggestItemOptions