{"id":15186268,"url":"https://github.com/dhenkes/vue2-ace","last_synced_at":"2025-10-02T01:31:10.243Z","repository":{"id":143926982,"uuid":"72424324","full_name":"dhenkes/vue2-ace","owner":"dhenkes","description":"NO LONGER MAINTAINED. A Vue2 component for including the ace editor","archived":true,"fork":false,"pushed_at":"2018-01-19T14:26:16.000Z","size":11,"stargazers_count":18,"open_issues_count":4,"forks_count":11,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-16T13:33:49.131Z","etag":null,"topics":["ace-editor","vue2"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"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/dhenkes.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-10-31T10:02:30.000Z","updated_at":"2023-01-28T19:36:07.000Z","dependencies_parsed_at":"2024-06-19T01:25:54.470Z","dependency_job_id":null,"html_url":"https://github.com/dhenkes/vue2-ace","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dhenkes%2Fvue2-ace","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dhenkes%2Fvue2-ace/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dhenkes%2Fvue2-ace/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dhenkes%2Fvue2-ace/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dhenkes","download_url":"https://codeload.github.com/dhenkes/vue2-ace/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234922757,"owners_count":18907828,"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":["ace-editor","vue2"],"created_at":"2024-09-27T18:01:16.849Z","updated_at":"2025-10-02T01:31:04.978Z","avatar_url":"https://github.com/dhenkes.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NO LONGER MAINTAINED\n\nDue to lack of time I can't maintain this component anymore. If someone is interested\nin taking it over and going further with the development, feel free to contact me.\n\n# vue2-ace\n\nA Vue2 component for including the [ace editor](https://ace.c9.io/).\n\n### Installation\n\n```\nnpm install --save vue2-ace\n```\n\n### How to use\n\nImport the component, the mode and the theme in `\u003cscript\u003e`.\n\n```\nimport editor from 'vue2-ace'\nimport 'brace/mode/javascript'\nimport 'brace/theme/chrome'\n```\n\nRegister the component in the Vue options.\n\n```\ncomponents: {\n  editor\n}\n```\n\nUse the component in your `template`. Make sure to change `variable` to a string\nthe editor should start with (it can be an empty string too).\n\n```\n\u003ceditor :content=\"variable\"\u003e\u003c/editor\u003e\n```\n\n\nThe content-prop is required, the other props have the following defaults:\n\n```\nlang: javascript\ntheme: chrome\nheight: 300px\nwidth: 100%\nsync: false\noptions: {}\n```\n\nIf you want to change any of these defaults, just include them when you use the\ncomponent in the template.\n\n```\n\u003ceditor :content=\"variable\" :height=\"'500px'\"\u003e\u003c/editor\u003e\n\n\u003ceditor :content=\"variable\" :width=\"'50%'\"\u003e\u003c/editor\u003e\n\n\u003ceditor :content=\"variable\" :lang=\"'html'\"\u003e\u003c/editor\u003e\n\n\u003ceditor :content=\"variable\" :theme=\"'github'\"\u003e\u003c/editor\u003e\n\n\u003ceditor :content=\"variable\" :sync=\"true\"\u003e\u003c/editor\u003e\n\n\u003ceditor :content=\"variable\" :options=\"options\"\u003e\u003c/editor\u003e\n```\n\nThe theme can be changed after the component already has been mounted. Just\nchange the string of the theme-variable.\n\nTo sync the content of the editor to the original content-variable, set the\nsync prop to true. Watch out: Every time the the original variable updates, the\neditor will also update it's content.\n\nIf you want to use another lang or theme, don't forget to import it.\n\nYou can pass extra options like font-family or font-size using the option prop.\nIt is set in the component using `editor.setOptions()`.\n\n```\ndata () {\n  return {\n    options: {\n      fontSize: '12pt'\n    }\n  }\n}\n```\n\nLast but not least listen on the `editor-update`. Make sure to replace\n`vm.function` with the function you want to execute.\n\n```\nmounted () {\n  var vm = this;\n  vm.$on('editor-update', vm.function);\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdhenkes%2Fvue2-ace","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdhenkes%2Fvue2-ace","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdhenkes%2Fvue2-ace/lists"}