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

| Name | Description | Type | Default | Version | | ------------------------ | ------------------------- | ----------------------------------------------------- | ------------ | ------- | | modelValue (v-model) | Bound value (base mode) | string | - | - | | originalData (v-model) | Bound value (diff mode) | string | - | - | | modifiedData (v-model) | Bound value (diff mode) | string | - | - | | mode | Editor mode | 'diff' | 'base' | 'base' | - | | language | Editor language | string | "javascript" | - | | theme | Editor theme | "vs" | "vs-dark" | "hc-black" | "hc-light" | "vs-dark" | - | | placeholder | Placeholder text | string | - | - | | disabled | Disabled state | base mode: booleandiff mode: [boolean, boolean] | - | - | | config | Code editor configuration | ConfigOptions (see Type below) | - | - | | diySuggest | Custom suggestions | SuggestItemOptions[] (see Type below) | - | - |

Events

| Event Name | Description | Parameter | | ---------- | ---------------------------- | ------------ | | select | Select content in the editor | value:string |

• 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

| Method Name | Description | Parameter | Return | Version | | ----------- | -------------------------------------------- | ------------ | ------ | ------- | | insertText | Insert content (only available in base mode) | field:string | - | - |

• 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

| Name | Description | Type | Default | Version | | --------------------------- | ------------------------------------ | -------------------------------------------------------------- | ----------------------- | ------- | | autoIndent | Auto indentation | "brackets" | "none" | "keep" | "advanced" | "full" | "brackets" | - | | contextmenu | Right-click menu | boolean | false | - | | autoClosingBrackets | Auto closing brackets | "always" | "languageDefined" | "beforeWhitespace" | "never" | "always" | - | | automaticLayout | Automatic layout | boolean | true | - | | cursorBlinking | Cursor style | "blink" | "smooth" | "phase" | "expand" | "solid" | "expand" | - | | dragAndDrop | Allow content drag and drop | boolean | true | - | | extraEditorClassName | Additional editor class name | string | "amoayun-monaco-editor" | - | | fixedOverflowWidgets | Fixed overflow widgets | boolean | true | - | | glyphMargin | Show line number margin | boolean | false | - | | lineNumbers | Display line numbers | "on" | "off" | "relative" | "interval" | "on" | - | | matchBrackets | Highlight matching brackets | "never" | "near" | "always" | "always" | - | | overviewRulerBorder | Show overview ruler border | boolean | true | - | | scrollBeyondLastLine | Allow scrolling beyond the last line | boolean | false | - | | showDeprecated | Show deprecated code | boolean | false | - | | showFoldingControls | Folding controls display | "always" | "never" | "mouseover" | "always" | - | | unfoldOnClickAfterEndOfLine | Unfold on end of line click | boolean | true | - | | smoothScrolling | Enable smooth scrolling | boolean | true | - | | tabCompletion | Enable tab completion | "on" | "off" | "onlySnippets" | "on" | - | | wordWrap | Word wrapping | "off" | "on" | "wordWrapColumn" | "bounded" | "off" | - |

SuggestItemOptions

| Name | Description | Type | Default | Version | | ------------- | ------------------------------ | ------ | ----------------------------------------- | ------- | | label | Keyword | string | - | - | | kind | Suggestion type | number | 17 | - | | insertText | Text to insert for the keyword | string | Uses insertText value first, label second | - | | detail | Brief description | string | - | - | | documentation | Detailed description | string | - | - |