{"id":19728629,"url":"https://github.com/imguolao/monaco-vue","last_synced_at":"2025-05-15T03:04:59.502Z","repository":{"id":37853844,"uuid":"491074305","full_name":"imguolao/monaco-vue","owner":"imguolao","description":"Use monaco-editor loaded from CDN in Vue 2\u00263, no need to bundling.","archived":false,"fork":false,"pushed_at":"2025-03-27T10:53:10.000Z","size":1321,"stargazers_count":279,"open_issues_count":4,"forks_count":23,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-15T03:04:36.648Z","etag":null,"topics":["editor","monaco","monaco-eidtor","typescript","vite","vue","vue2","vue3"],"latest_commit_sha":null,"homepage":"https://imguolao.github.io/monaco-vue/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/imguolao.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-05-11T11:07:11.000Z","updated_at":"2025-05-14T22:56:24.000Z","dependencies_parsed_at":"2024-01-30T08:41:15.880Z","dependency_job_id":"73b4ea63-ead2-40e6-ab66-6d87ce7b7331","html_url":"https://github.com/imguolao/monaco-vue","commit_stats":{"total_commits":54,"total_committers":4,"mean_commits":13.5,"dds":"0.18518518518518523","last_synced_commit":"7f6b4e823f8e9ab5afa379dfe82cd498c1c32336"},"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imguolao%2Fmonaco-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imguolao%2Fmonaco-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imguolao%2Fmonaco-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imguolao%2Fmonaco-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imguolao","download_url":"https://codeload.github.com/imguolao/monaco-vue/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254264765,"owners_count":22041793,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["editor","monaco","monaco-eidtor","typescript","vite","vue","vue2","vue3"],"created_at":"2024-11-12T00:06:10.216Z","updated_at":"2025-05-15T03:04:59.485Z","avatar_url":"https://github.com/imguolao.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Browser editor"],"sub_categories":[],"readme":"# monaco-vue\n\nUse `monaco-editor` loaded from CDN in Vue 2\u00263, no need to bundling.\n\n[![gitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/imguolao/monaco-vue/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/@guolao/vue-monaco-editor.svg?style=flat)](https://www.npmjs.com/package/@guolao/vue-monaco-editor) [![npm downloads](https://img.shields.io/npm/dm/%40guolao%2Fvue-monaco-editor)](https://www.npmjs.com/package/@guolao/vue-monaco-editor)\n\nEnglish | [简体中文](https://github.com/imguolao/monaco-vue/blob/main/README.zh-CN.md)\n\n## Why\n\nThe `monaco-editor` doesn't support ESM very well, which results in large files when the code is bundled.\n\nBut the official team has written a loader to lazy load files of the editor remotely, so we can load the files from a CDN to use it.\n\nIf you still want to import `monaco-editor` files from `node_modules` and bundle them into your code (without using remote loading), you will need to use a bundling tool. See [here](#npm-package).\n\n## Installation\n\n```sh\nnpm i @guolao/vue-monaco-editor\n```\n\nVue `\u003c= 2.6.14` requires [@vue/composition-api](https://github.com/vuejs/composition-api) to be installed.\n\n```sh\nnpm i @guolao/vue-monaco-editor @vue/composition-api\n```\n\nDon't forget to register the `@vue/composition-api` plugin!\n\n```ts\nimport Vue from 'vue'\nimport VueCompositionAPI from '@vue/composition-api'\n\nVue.use(VueCompositionAPI)\n```\n\nOf course, you can also use [unpkg](https://unpkg.com/@guolao/vue-monaco-editor/lib/umd/monaco-vue.js).\n\n## Usage\n\n**Global Registration**\n\n```ts\nimport { createApp } from 'vue'\nimport { install as VueMonacoEditorPlugin } from '@guolao/vue-monaco-editor'\n\nconst app = createApp(App)\napp.use(VueMonacoEditorPlugin, {\n  paths: {\n    // You can change the CDN config to load other versions\n    vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/min/vs'\n  },\n})\n```\n\n**Local Registration**\n\n```ts\n// main.ts\nimport { loader } from '@guolao/vue-monaco-editor'\nloader.config({\n  paths: {\n    vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/min/vs',\n  },\n})\n\n// editor.vue\nimport { VueMonacoEditor } from '@guolao/vue-monaco-editor'\nexport default {\n  components: { VueMonacoEditor },\n}\n```\n\nAnd then, use it.\n\n**Editor**\n\n```vue\n\u003ctemplate\u003e\n  \u003cvue-monaco-editor\n    v-model:value=\"code\"\n    theme=\"vs-dark\"\n    :options=\"MONACO_EDITOR_OPTIONS\"\n    @mount=\"handleMount\"\n  /\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\" setup\u003e\nimport { ref, shallowRef } from 'vue'\n\nconst MONACO_EDITOR_OPTIONS = {\n  automaticLayout: true,\n  formatOnType: true,\n  formatOnPaste: true,\n}\n\nconst code = ref('// some code...')\nconst editor = shallowRef()\nconst handleMount = editorInstance =\u003e (editor.value = editorInstance)\n\n// your action\nfunction formatCode() {\n  editor.value?.getAction('editor.action.formatDocument').run()\n}\n\u003c/script\u003e\n```\n\n**Diff Editor**\n\n```vue\n\u003ctemplate\u003e\n  \u003cvue-monaco-diff-editor\n    theme=\"vs-dark\"\n    original=\"// the original code\"\n    modified=\"// the modified code\"\n    language=\"javascript\"\n    :options=\"OPTIONS\"\n    @mount=\"handleMount\"\n  /\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\" setup\u003e\nimport { ref, shallowRef } from 'vue'\n\nconst OPTIONS = {\n  automaticLayout: true,\n  formatOnType: true,\n  formatOnPaste: true,\n  readOnly: true,\n}\n\nconst diffEditor = shallowRef()\nconst handleMount = diffEditorInstance =\u003e (diffEditor.value = diffEditorInstance)\n\n// get the original value\nfunction getOriginalValue() {\n  return diffEditor.value.getOriginalEditor().getValue()\n}\n\n// get the modified value\nfunction getModifiedValue() {\n  return diffEditor.value.getModifiedEditor().getValue()\n}\n\u003c/script\u003e\n```\n\n## Props \u0026 Events \u0026 slots\n\n### Editor\n\n| Name | Type | Default | Description | remark |\n| --- | --- | --- | --- | --- |\n| value | `string` |  | value of the current model, can use `v-model:value` | `v-model:value` |\n| language | `string` |  | all language of the current model | languages supported by `monaco-editor`, [view here](https://github.com/microsoft/monaco-editor/tree/main/src/basic-languages) |\n| path | `string` |  | path to the current model |  |\n| defaultValue | `string` |  | default value of the current model |  |\n| defaultLanguage | `string` |  | default language of the current model | languages supported by `monaco-editor` [view here](https://github.com/microsoft/monaco-editor/tree/main/src/basic-languages) |\n| defaultPath | `string` |  | default path of the current model | `monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))` |\n| theme | `vs` \\| `vs-dark` | `vs` | the theme for the monaco editor. |  |\n| line | `number` |  | number of lines to jump to |  |\n| options | `object` | `{}` | [IStandaloneEditorConstructionOptions](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.IStandaloneEditorConstructionOptions.html) |  |\n| overrideServices | `object` | `{}` | [IEditorOverrideServices](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.IEditorOverrideServices.html) |  |\n| saveViewState | `boolean` | `true` | save the view state of the model (scroll position, etc.) after model changes | a unique `path` needs to be configured for each model |\n| width | `number` \\| `string` | `100%` | container width |  |\n| height | `number` \\| `string` | `100%` | container height |  |\n| className | `string` |  | inner container class name |  |\n| @beforeMount | `(monaco: Monaco) =\u003e void` |  | execute before the editor instance is created (don't use `@before-mount` in vue2, [detail](https://v2.vuejs.org/v2/guide/components-custom-events#Event-Names)) |  |\n| @mount | `(editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) =\u003e void` |  | execute after the editor instance has been created |  |\n| @change | `(value: string \\| undefined, event: monaco.editor.IModelContentChangedEvent) =\u003e void` |  | execute when  the changed value change |  |\n| @validate | `(markers: monaco.editor.IMarker[]) =\u003e void` |  | execute when a syntax error occurs | `monaco-editor` supports syntax-checked languages [view here](https://github.com/microsoft/monaco-editor/tree/main/src/basic-languages) |\n| `#default` | `slot` | `'loading...'` | loading status | when loading files from CDN, displaying the loading status will be more friendly |\n| `#failure` | `slot` | `'load failed'` | failure status | example: CDN network error |\n\n### Diff Editor\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| original | `string` |  | The original source value (left editor) |\n| modified | `string` |  | The modified source value (right editor) |\n| language | `string` |  | Language for the both models - original and modified (all languages that are [supported](https://github.com/microsoft/monaco-editor/tree/main/src/basic-languages) by monaco-editor) |\n| originalLanguage | `string` |  | This prop gives you the opportunity to specify the language of the original source separately, otherwise, it will get the value of the language property. |\n| modifiedLanguage | `string` |  | This prop gives you the opportunity to specify the language of the modified source separately, otherwise, it will get the value of language property. |\n| originalModelPath | `string` |  | Path for the \"original\" model. Will be passed as a third argument to `.createModel` method - `monaco.editor.createModel(..., ..., monaco.Uri.parse(originalModelPath))` |\n| modifiedModelPath | `string` |  | Path for the \"modified\" model. Will be passed as a third argument to `.createModel` method - `monaco.editor.createModel(..., ..., monaco.Uri.parse(modifiedModelPath))` |\n| theme  | `vs` \\| `vs-dark` \\| `string` | `vs` (`vs` theme equals `light` theme) | The theme for the monaco editor. Define new themes by `monaco.editor.defineTheme`. |\n| options | `object` | `{}` | [IStandaloneDiffEditorConstructionOptions](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.IStandaloneDiffEditorConstructionOptions.html) |\n| width | `number` \\| `string` | `100%` | Container width |\n| height | `number` \\| `string` | `100%` | Container height |\n| className | `string` |  | Inner container class name |\n| @beforeMount | `(monaco: Monaco) =\u003e void` |  | Execute before the editor instance is created (don't use `@before-mount` in vue2, [detail](https://v2.vuejs.org/v2/guide/components-custom-events#Event-Names)) |\n| @mount | `(editor: monaco.editor.IStandaloneDiffEditor, monaco: Monaco) =\u003e void` |  | Execute after the editor instance has been created |\n| `#default` | `slot` | `'loading...'` | Loading status |\n| `#failure` | `slot` | `'load failed'` | Failure status |  |\n\n## Hooks\n\n`useMonaco` use [@monaco-editor/loader](https://github.com/suren-atoyan/monaco-loader) to load `monaco-editor` from the CDN.\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv ref=\"containerRef\"\u003e\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\" setup\u003e\nimport { ref, onUnmounted, watchEffect, nextTick } from 'vue'\nimport { useMonaco } from '@guolao/vue-monaco-editor'\n\nconst containerRef = ref()\nconst { monacoRef, unload } = useMonaco()\n\n// watch once\nconst stop = watchEffect(() =\u003e {\n  if (monacoRef.value \u0026\u0026 containerRef.value) {\n    nextTick(() =\u003e stop())\n    monacoRef.value.editor.create(containerRef.value, { ... })\n  }\n})\n\n/*\n  When the component will be unmount,\n  If the monaco instance is not successfully loaded,\n  You need to manually unload.\n*/\nonUnmounted(() =\u003e !monacoRef.value \u0026\u0026 unload())\n\u003c/script\u003e\n```\n\n## CDN\n\n`vue-monaco-editor` use [@monaco-editor/loader](https://github.com/suren-atoyan/monaco-loader) to load the `monaco-editor` from the CDN(the loading process of `loader` is asynchronous).\n\nThe configuration of `loader` is global, only to be configured once.\n\n```ts\nimport { createApp } from 'vue'\nimport { install as VueMonacoEditorPlugin } from '@guolao/vue-monaco-editor'\n\nconst app = createApp(App)\napp.use(VueMonacoEditorPlugin, {\n  paths: {\n    // You can change the CDN config to load other versions\n    vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/min/vs'\n  },\n})\n```\n\n```ts\nimport { loader } from \"@guolao/vue-monaco-editor\"\n\n// loaded from CDN\nloader.config({\n  paths: {\n    vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/min/vs'\n  },\n})\n\n// configurable for different languages\nloader.config({ \"vs/nls\": { availableLanguages: { \"*\": \"de\" } } })\n\n// or\nloader.config({\n  paths: {\n    vs: \"...\",\n  },\n  \"vs/nls\" : {\n    availableLanguages: {\n      \"*\": \"de\",\n    },\n  },\n})\n```\n\n## NPM Package\n\nIf you still want to import `monaco-editor` files from `node_modules` and bundle them into your code (without using remote loading), you will need to use a bundling tool.\n\n```js\nimport * as monaco from \"monaco-editor\"\nimport { loader } from \"@guolao/vue-monaco-editor\"\n\n// loaded monaco-editor from `node_modules`\nloader.config({ monaco })\n```\n\n### Vite\n\nIf you are using `vite`, you need to do this (see [#1791 (comment)](https://github.com/vitejs/vite/discussions/1791#discussioncomment-321046) for details).\n\n```js\nimport { loader } from \"@guolao/vue-monaco-editor\"\n\nimport * as monaco from \"monaco-editor\"\nimport editorWorker from \"monaco-editor/esm/vs/editor/editor.worker?worker\"\nimport jsonWorker from \"monaco-editor/esm/vs/language/json/json.worker?worker\"\nimport cssWorker from \"monaco-editor/esm/vs/language/css/css.worker?worker\"\nimport htmlWorker from \"monaco-editor/esm/vs/language/html/html.worker?worker\"\nimport tsWorker from \"monaco-editor/esm/vs/language/typescript/ts.worker?worker\"\n\nself.MonacoEnvironment = {\n  getWorker(_, label) {\n    if (label === \"json\") {\n      return new jsonWorker()\n    }\n    if (label === \"css\" || label === \"scss\" || label === \"less\") {\n      return new cssWorker()\n    }\n    if (label === \"html\" || label === \"handlebars\" || label === \"razor\") {\n      return new htmlWorker()\n    }\n    if (label === \"typescript\" || label === \"javascript\") {\n      return new tsWorker()\n    }\n    return new editorWorker()\n  }\n}\n\nloader.config({ monaco })\n```\n\n### Rollup\n\nIf you are using `Rollup`, you can use the community provided plugin [rollup-plugin-monaco-editor](https://github.com/chengcyber/rollup-plugin-monaco-editor).\n\n### Webpack\n\nIf you are using `webpack`, `monaco-editor` officially provides a `webpack` plugin called [monaco-editor-webpack-plugin](https://www.npmjs.com/package/monaco-editor-webpack-plugin), which you can install and use.\n\n## Inspiration\n\nMonacoVue is made possible thanks to the inspirations from the following projects:\n\n- [monaco-loader](https://github.com/suren-atoyan/monaco-loader)\n- [monaco-react](https://github.com/suren-atoyan/monaco-react/tree/master)\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimguolao%2Fmonaco-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimguolao%2Fmonaco-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimguolao%2Fmonaco-vue/lists"}