{"id":29048548,"url":"https://github.com/vikyd/vue-monaco-singleline","last_synced_at":"2025-06-26T18:07:36.362Z","repository":{"id":50939306,"uuid":"336763616","full_name":"vikyd/vue-monaco-singleline","owner":"vikyd","description":"Single Line Mode Monaco Editor for Vue","archived":false,"fork":false,"pushed_at":"2021-05-27T09:42:08.000Z","size":115,"stargazers_count":12,"open_issues_count":1,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-08-11T00:04:57.834Z","etag":null,"topics":["editor","line","monaco","placeholder","single","vue"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vikyd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-02-07T10:55:14.000Z","updated_at":"2023-09-01T17:02:27.000Z","dependencies_parsed_at":"2022-08-25T13:01:42.428Z","dependency_job_id":null,"html_url":"https://github.com/vikyd/vue-monaco-singleline","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/vikyd/vue-monaco-singleline","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikyd%2Fvue-monaco-singleline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikyd%2Fvue-monaco-singleline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikyd%2Fvue-monaco-singleline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikyd%2Fvue-monaco-singleline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vikyd","download_url":"https://codeload.github.com/vikyd/vue-monaco-singleline/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikyd%2Fvue-monaco-singleline/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262119541,"owners_count":23261906,"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","line","monaco","placeholder","single","vue"],"created_at":"2025-06-26T18:07:30.075Z","updated_at":"2025-06-26T18:07:36.350Z","avatar_url":"https://github.com/vikyd.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Single Line Mode Monaco Editor for Vue\n\nSingle line mode [monaco editor](https://github.com/Microsoft/monaco-editor) for Vue.\n\n[![vue-monaco-singleline](https://nodei.co/npm/vue-monaco-singleline.png)](https://npmjs.org/package/vue-monaco-singleline)\n\n# Installation\n\n```sh\n# npm\nnpm install vue-monaco-singleline\n\n# or yarn\nyarn add vue-monaco-singleline\n```\n\n# Online Demo\n\n- [Simple](https://codesandbox.io/s/vue-monaco-singleline-simple-9tkul?file=/src/App.vue)\n- [Change Height, Width, FontSize](https://codesandbox.io/s/vue-monaco-singleline-change-style-mnwix?file=/src/App.vue)\n- [Custom Language and Theme](https://vikyd.github.io/vue-monaco-singleline-custom-language/)\n\n# Using inside Vue Component\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cmonaco-singleline v-model=\"value\" :options=\"options\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport MonacoSingleline from 'vue-monaco-singleline'\nexport default {\n  name: 'App',\n  components: {\n    MonacoSingleline,\n  },\n  data() {\n    return {\n      value: 'abc 123',\n      options: {\n        // Monaco Editor Options\n        // all options: https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandaloneeditorconstructionoptions.html\n      },\n    }\n  },\n  methods: {\n    onChange(value) {\n      console.log(value)\n    },\n  },\n}\n\u003c/script\u003e\n```\n\n# Want normal language highlight\n\nFirst of all, install npm package if want normal language highlight:\n\n```sh\n# npm\nnpm install -D monaco-editor-webpack-plugin@1.9.1\n\n# or yarn\nyarn add -D monaco-editor-webpack-plugin@1.9.1\n```\n\nThen:\n\nIf using [Vue CLI], can add to `vue.config.js`:\n\n```js\nconst MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')\n\nmodule.exports = {\n  chainWebpack: config =\u003e {\n    config.plugin('monaco-editor').use(MonacoWebpackPlugin, [\n      {\n        // Languages are loaded on demand at runtime\n        languages: ['json', 'javascript', 'html', 'xml'],\n      },\n    ])\n  },\n}\n```\n\nIf also want Javascript autocompletion, add `typescript` to `languages`, because `typescript` is the instantiator of `javascript`:\n\n\u003e see: [Some languages share the same web worker. If one of the following languages is included, you must also include the language responsible for instantiating their shared worker](https://github.com/microsoft/monaco-editor-webpack-plugin#options)\n\n```js\nconst MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')\n\nmodule.exports = {\n  chainWebpack: config =\u003e {\n    config.plugin('monaco-editor').use(MonacoWebpackPlugin, [\n      {\n        // Languages are loaded on demand at runtime\n        languages: ['json', 'typescript', 'javascript', 'html', 'xml'],\n      },\n    ])\n  },\n}\n```\n\nIf using with Webpack only, see [here](https://github.com/FE-Mars/monaco-editor-vue#using-with-webpack).\n\n# Props\n\nSupport full props of [monaco-editor-vue](https://github.com/FE-Mars/monaco-editor-vue#properties).\n\n- `value`: editor content\n  - default: ''\n- `v-model`: bind editor content (should not use `value` at this time)\n- `placeholder`: placeholder\n- `width`: width of monaco editor (not this component)\n  - Type: `Number`(px) or `String`(same as css `width`)\n  - default: `100%`\n  - should not use this prop in most case, should set style or class to this component `\u003cmonaco-singleline\u003e`\n- `height`: height of monaco editor (not this component)\n  - Type: `Number`(px) or `String`(same as css `width`)\n  - default: `21`（px）\n- `diffEditor`: monaco editor diff mode\n  - Type: 'Boolean'\n  - default: `false`\n  - example: TODO: codesandbox\n- `original` original conent of editor, only works when `diffEditor` is `true`\n  - in contrast, `value` or `v-model` is the modified content\n- `language` the initial language of the auto created model in the editor. Defaults to `javascript`.\n  - default: 'javascript'\n  - notice: no any highlight or autocompletion, if not adding `MonacoWebpackPlugin` to `vue.config.js`\n- `theme` the theme of the editor. Defaults to `vs`.\n  - default: `vs`\n  - all out-of-the-box themes: `vs`, `vs-dark`, `hc-black`, see [here](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandaloneeditorconstructionoptions.html#theme)\n- `options` refer to [Monaco interface IEditorConstructionOptions](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditorconstructionoptions.html).\n  - default: see `DefaultOptions` inside source file [monaco-singleline.vue](src/monaco-singleline.vue)\n- `editorBeforeMount(monaco)` The function called before the editor mounted (similar to `beforeMount` of Vue).\n  - `editorBeforeMount` is Vue `props` not `event`, should be used like `:editorBeforeMount` not `@editorBeforeMount`\n- `editorMounted(editor, monaco)` The function called when the editor has been mounted (similar to `mounted` of Vue).\n  - `editorMounted` is Vue `props` not `event`, should use like `:editorMounted`\n\n# Default Options\n\nSee `DefaultOptions` inside source file [monaco-singleline.vue](src/monaco-singleline.vue).\n\n# Events\n\n- `change(newValue, event)` an event emitted when the content of the current model has changed.\n  - this event will not emit before value change, if want to, should make monaco editor instance to listen [onKeyUp](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandalonecodeeditor.html#onkeyup) event or so. seet [this demo](TODO:)\n\nMore events should be found on [monaco editor events](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandalonecodeeditor.html), and be set on `editorMounted`.\n\n# Methods\n\n- `focus`\n  - example: `this.$refs.myEditor.focus()`, or `this.editor.focus()`(on monaco instance)\n\nMore methods should be found on [monaco editor methods](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandalonecodeeditor.html), and be used on monaco editor instance(not this component's ref).\n\n# Height and Width\n\nWhen set option `automaticLayout: true`(already default), [Monaco has a built-in auto resize to parent container functionality](https://stackoverflow.com/a/47163918/2752670).\n\nIt is highly recommended that change this component height and width by CSS on this component.\n\n# Custom Style\n\nIt is highly recommended that custom this component by override CSS style inside.\n\nSee [Vue Deep Selectors](https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors)\n\n- wrapper class: `monaco-singleline`\n  - controls padding to border e.t.c\n- placeholder class: `placeholder`\n\n# Font Size and height\n\n[Online Demo here.](https://codesandbox.io/s/vue-monaco-singleline-change-style-mnwix?file=/src/App.vue)\n\nIf want to change font size, you should change:\n\n- change monaco editor options `fontSize`\n- and, change the `height` prop to a suitable value\n\nYou may need some art to fine tuning the best you like.\n\nQ: Why not auto ?\n\nA: monaco editor will fit to parent element size, not parent fit to monaco editor.\n\n# ReadOnly mode\n\n```vue\n\u003cmonaco-singleline readOnly /\u003e\n```\n\nWill:\n\n- disable editing\n- hide edit cursor\n\n# Development\n\nnpm:\n\n```sh\n# install dependencies\nnpm install\n\n# run local example app\nnpm run serve\n\n# compiles and minifies for production\nnpm run build\n```\n\nyarn:\n\n```sh\n# install dependencies\nyarn\n\n# run local example app\nyarn serve\n\n# compiles and minifies for production\nyarn build\n```\n\n# Useful Resources\n\n- [monaco-editor-vue](https://github.com/FE-Mars/monaco-editor-vue)\n- [monaco editor create options](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandaloneeditorconstructionoptions.html)\n- [monaco editor issue: Single line mode](https://github.com/microsoft/monaco-editor/issues/2009)\n- [monaco editor issue: Is there any way to switch to one-line mode?](https://github.com/microsoft/monaco-editor/issues/1601)\n\n# Thanks\n\n[monaco-editor-vue](https://github.com/FE-Mars/monaco-editor-vue)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvikyd%2Fvue-monaco-singleline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvikyd%2Fvue-monaco-singleline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvikyd%2Fvue-monaco-singleline/lists"}