{"id":13534132,"url":"https://github.com/egoist/vue-monaco","last_synced_at":"2025-05-15T13:02:54.792Z","repository":{"id":37432450,"uuid":"99214575","full_name":"egoist/vue-monaco","owner":"egoist","description":"MonacoEditor component for Vue.js","archived":false,"fork":false,"pushed_at":"2022-08-30T09:34:54.000Z","size":2256,"stargazers_count":695,"open_issues_count":54,"forks_count":126,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-07T15:03:16.911Z","etag":null,"topics":["component","editor","monaco-editor","vscode","vue"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/egoist.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-03T09:18:46.000Z","updated_at":"2025-03-30T00:43:55.000Z","dependencies_parsed_at":"2022-08-09T14:23:29.711Z","dependency_job_id":null,"html_url":"https://github.com/egoist/vue-monaco","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egoist%2Fvue-monaco","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egoist%2Fvue-monaco/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egoist%2Fvue-monaco/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egoist%2Fvue-monaco/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/egoist","download_url":"https://codeload.github.com/egoist/vue-monaco/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248961035,"owners_count":21189990,"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":["component","editor","monaco-editor","vscode","vue"],"created_at":"2024-08-01T07:01:26.772Z","updated_at":"2025-04-14T20:53:05.090Z","avatar_url":"https://github.com/egoist.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# vue-monaco\n\n[![NPM version](https://img.shields.io/npm/v/vue-monaco.svg?style=flat)](https://npmjs.com/package/vue-monaco) [![NPM downloads](https://img.shields.io/npm/dm/vue-monaco.svg?style=flat)](https://npmjs.com/package/vue-monaco) [![CircleCI](https://circleci.com/gh/egoist/vue-monaco/tree/master.svg?style=shield)](https://circleci.com/gh/egoist/vue-monaco/tree/master) [![donate](https://img.shields.io/badge/$-donate-ff69b4.svg?maxAge=2592000\u0026style=flat)](https://github.com/egoist/donate)\n\n[Monaco Editor](https://github.com/Microsoft/monaco-editor) is the code editor that powers VS Code, now it's available as a Vue component `\u003cMonacoEditor\u003e` thanks to this project.\n\n## Install\n\n```bash\nnpm install vue-monaco\n```\n\nOr\n\n```bash\nyarn add vue-monaco\n```\n\n## Usage\n\n### Use ESM version with webpack\n\nUse [monaco-editor-webpack-plugin](https://github.com/Microsoft/monaco-editor-webpack-plugin):\n\n```js\n// webpack.config.js\nconst MonacoEditorPlugin = require('monaco-editor-webpack-plugin')\n\nmodule.exports = {\n  plugins: [\n    new MonacoEditorPlugin({\n      // https://github.com/Microsoft/monaco-editor-webpack-plugin#options\n      // Include a subset of languages support\n      // Some language extensions like typescript are so huge that may impact build performance\n      // e.g. Build full languages support with webpack 4.0 takes over 80 seconds\n      // Languages are loaded on demand at runtime\n      languages: ['javascript', 'css', 'html', 'typescript']\n    })\n  ]\n}\n```\n\nThen use the component:\n\n```vue\n\u003ctemplate\u003e\n  \u003cMonacoEditor class=\"editor\" v-model=\"code\" language=\"javascript\" /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport MonacoEditor from 'vue-monaco'\n\nexport default {\n  components: {\n    MonacoEditor\n  },\n\n  data() {\n    return {\n      code: 'const noop = () =\u003e {}'\n    }\n  }\n}\n\u003c/script\u003e\n\n\u003cstyle\u003e\n.editor {\n  width: 600px;\n  height: 800px;\n}\n\u003c/style\u003e\n```\n\n### Use AMD version\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" /\u003e\n    \u003cmeta http-equiv=\"Content-Type\" content=\"text/html;charset=utf-8\" /\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"app\"\u003e\u003c/div\u003e\n\n    \u003cscript src=\"https://unpkg.com/vue\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://unpkg.com/vue-monaco\"\u003e\u003c/script\u003e\n    \u003cscript src=\"monaco-editor/min/vs/loader.js\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n      require.config({ paths: { vs: 'monaco-editor/min/vs' } })\n\n      new Vue({\n        el: '#app',\n        template: `\n          \u003cmonaco-editor\n            style=\"width:800px;height:600px;border:1px solid grey\"\n            v-model=\"code\" \n            language=\"javascript\" \n            :amdRequire=\"amdRequire\"\n          /\u003e`,\n        data: {\n          code: 'const noop = () =\u003e {}'\n        },\n        methods: {\n          amdRequire: require\n        }\n      })\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nWhen loading monaco-editor from a CDN, you need to change `require.config` to look like this:\n\n```js\nrequire.config({ paths: { vs: 'http://www.mycdn.com/monaco-editor/min/vs' } })\n\n// Before loading vs/editor/editor.main, define a global MonacoEnvironment that overwrites\n// the default worker url location (used when creating WebWorkers). The problem here is that\n// HTML5 does not allow cross-domain web workers, so we need to proxy the instantiation of\n// a web worker through a same-domain script\nwindow.MonacoEnvironment = {\n  getWorkerUrl: function(workerId, label) {\n    return `data:text/javascript;charset=utf-8,${encodeURIComponent(`\n        self.MonacoEnvironment = {\n          baseUrl: 'http://www.mycdn.com/monaco-editor/min/'\n        };\n        importScripts('http://www.mycdn.com/monaco-editor/min/vs/base/worker/workerMain.js');`)}`\n  }\n}\n```\n\n### Props\n\n- `options`: The [second argument](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditorconstructionoptions.html) of [`monaco.editor.create`](https://microsoft.github.io/monaco-editor/api/modules/monaco.editor.html#create).\n- `value`: A shortcut to set `options.value`.\n- `theme`: A shortcut to set `options.theme`.\n- `language`: A shortcut to set `options.language`.\n- `amdRequire`: Load monaco-editor using given amd-style require function.\n- `diffEditor`: `boolean` Indicate that this is a DiffEditor, `false` by default.\n\n### Component Events\n\n#### `editorWillMount`\n\n- Params:\n  - `monaco`: [`monaco module`](https://microsoft.github.io/monaco-editor/api/index.html)\n\nCalled before mounting the editor.\n\n#### `editorDidMount`\n\n- Params:\n  - `editor`: [`IStandaloneCodeEditor`](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandalonecodeeditor.html) for normal editor, [`IStandaloneDiffEditor`](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandalonediffeditor.html) for diff editor.\n\nCalled when the editor is mounted.\n\n#### `change`\n\nEditor value is updated.\n\n- Params:\n  - `value`: New editor value.\n  - `event`: The `event` from [`onDidChangeModelContent`](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandalonecodeeditor.html#ondidchangemodelcontent).\n\n#### Editor Events\n\nYou can listen to the editor events directly like this:\n\n```vue\n\u003ctemplate\u003e\n  \u003cMonacoEditor v-model=\"code\" @editorDidMount=\"editorDidMount\" /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  methods: {\n    editorDidMount(editor) {\n      // Listen to `scroll` event\n      editor.onDidScrollChange(e =\u003e {\n        console.log(e)\n      })\n    }\n  },\n\n  data() {\n    return {\n      code: '...'\n    }\n  }\n}\n\u003c/script\u003e\n```\n\nRefer to [this page](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandalonecodeeditor.html) for all editor events.\n\n### Methods\n\n- `getEditor(): IStandaloneCodeEditor`: Return the [editor instance](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandalonecodeeditor.html).\n\nUse `ref` to interact with the `MonacoEditor` component in order to access methods: `\u003cMonacoEditor ref=\"editor\" /\u003e`, then `this.$refs.editor.getEditor()` will be available.\n\n### Use the DiffEditor\n\nUse `diffEditor` prop to indicate that this is a DiffEditor, use `original` prop to set the content for the original editor, use `value` prop to set the content for the modified editor.\n\n```vue\n\u003cMonacoEditor\n  language=\"javascript\"\n  :diffEditor=\"true\"\n  :value=\"code\"\n  :original=\"originalCode\"\n/\u003e\n```\n\nIn this case, the component's `getEditor()` returns the [`IStandaloneDiffEditor`](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandalonediffeditor.html) instance, while you can use `getModifiedEditor()` to get the modified editor which is an [`IStandaloneCodeEditor`](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandalonecodeeditor.html) instance.\n\n## Contributing\n\n1. Fork it!\n2. Create your feature branch: `git checkout -b my-new-feature`\n3. Commit your changes: `git commit -am 'Add some feature'`\n4. Push to the branch: `git push origin my-new-feature`\n5. Submit a pull request :D\n\n## Author\n\n**vue-monaco** © [egoist](https://github.com/egoist), Released under the [MIT](./LICENSE) License.\u003cbr\u003e\nAuthored and maintained by egoist with help from contributors ([list](https://github.com/egoist/vue-monaco/contributors)).\n\n\u003e [Website](https://egoist.sh) · GitHub [@egoist](https://github.com/egoist) · Twitter [@\\_egoistlily](https://twitter.com/_egoistlily)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fegoist%2Fvue-monaco","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fegoist%2Fvue-monaco","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fegoist%2Fvue-monaco/lists"}