{"id":26984636,"url":"https://github.com/dneustadt/vue-rough","last_synced_at":"2025-04-03T17:48:39.308Z","repository":{"id":39030947,"uuid":"285021340","full_name":"dneustadt/vue-rough","owner":"dneustadt","description":"A small components library to use Rough.js in Vue.","archived":false,"fork":false,"pushed_at":"2023-06-25T14:31:04.000Z","size":2923,"stargazers_count":27,"open_issues_count":19,"forks_count":10,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-05-01T18:25:48.556Z","etag":null,"topics":["canvas","drawn","hand","js","rough","svg","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/dneustadt.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-08-04T15:28:52.000Z","updated_at":"2024-04-10T17:22:04.000Z","dependencies_parsed_at":"2024-01-02T23:34:51.088Z","dependency_job_id":"89e918cf-6583-4065-a17f-6b1e679bd97f","html_url":"https://github.com/dneustadt/vue-rough","commit_stats":{"total_commits":11,"total_committers":4,"mean_commits":2.75,"dds":0.4545454545454546,"last_synced_commit":"6a005b7e6468840281f8670526d45b82fdc5d008"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dneustadt%2Fvue-rough","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dneustadt%2Fvue-rough/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dneustadt%2Fvue-rough/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dneustadt%2Fvue-rough/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dneustadt","download_url":"https://codeload.github.com/dneustadt/vue-rough/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247052501,"owners_count":20875681,"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":["canvas","drawn","hand","js","rough","svg","vue"],"created_at":"2025-04-03T17:48:38.842Z","updated_at":"2025-04-03T17:48:39.302Z","avatar_url":"https://github.com/dneustadt.png","language":"Vue","funding_links":[],"categories":["Components \u0026 Libraries","UI Components [🔝](#readme)"],"sub_categories":["UI Components"],"readme":"# vue-rough\n\nA small components library to use [Rough.js](https://github.com/rough-stuff/rough) in Vue.\n\n## Examples\n\n[https://vue-rough.neustadt.dev](https://vue-rough.neustadt.dev)\n\n## Installation\n\n```\n$ npm install vue-rough\n```\n\n```js\nimport VueRough from 'vue-rough';\n\nVue.use(VueRough);\n```\n\n## Container Components\n\nThese wrap around visual components. You can choose between canvas or SVG as the container format.\n\n```vue\n\u003crough-canvas \n    width=\"500px\" \n    height=\"500px\"\n    :options=\"options\"\n\u003e\u003c/rough-canvas\u003e\n```\n```vue\n\u003crough-svg \n    width=\"500px\" \n    height=\"500px\"\n    :options=\"options\"\n\u003e\u003c/rough-svg\u003e\n```\n\n`options` takes an Object with properties to be applied in general to all included visual components.\nSee the [Rough.js wiki](https://github.com/rough-stuff/rough/wiki#options) for a list of available\noptions.\n\n## Visual Components\n\nShown below is a quick overview of the available components with their required properties.\nAll components may use additional properties. See the [Rough.js wiki](https://github.com/rough-stuff/rough/wiki#options)\nfor a full list of options. Components must be placed inside `rough-canvas` or `rough-svg`\n\n### rough-line\n```vue\n\u003crough-line\n    :x1=\"1\"\n    :y1=\"1\"\n    :x2=\"20\"\n    :y2=\"20\"\n/\u003e\n```\n\n### rough-rectangle\n```vue\n\u003crough-rectangle\n    :x1=\"20\"\n    :y1=\"20\"\n    :x2=\"40\"\n    :y2=\"40\"\n/\u003e\n```\n\n### rough-ellipse\n```vue\n\u003crough-ellipse\n    :x=\"20\"\n    :y=\"20\"\n    :width=\"40\"\n    :height=\"40\"\n/\u003e\n```\n\n### rough-circle\n```vue\n\u003crough-circle\n    :x=\"80\"\n    :y=\"80\"\n    :diameter=\"40\"\n/\u003e\n```\n\n### rough-linear-path\n```vue\n\u003crough-linear-path\n    :points=\"[[80, 10], [120, 20], [80, 120], [80, 100]]\"\n/\u003e\n```\n\n### rough-polygon\n```vue\n\u003crough-polygon\n    :vertices=\"[[390, 130], [490, 140], [350, 240], [490, 220]]\"\n/\u003e\n```\n\n### rough-arc\n```vue\n\u003crough-arc\n    :x=\"350\"\n    :y=\"300\"\n    :width=\"200\"\n    :height=\"180\"\n    :start=\"Math.PI / 2\"\n    :stop=\"Math.PI\"\n    :closed=\"true\"\n/\u003e\n```\n\n### rough-curve\n```vue\n\u003crough-curve\n    :points=\"[[10,328],[30,373],[50,390],[70,373],[90,328],[110,272],[130,227],[150,210],[170,227],[190,272],[210,328],[230,373],[250,390],[270,373],[290,328],[310,272],[330,227],[350,210],[370,227],[390,272]]\"\n/\u003e\n```\n\n### rough-path\n```vue\n\u003crough-path\n    d=\"M0 0l128 220.8L256 0h-51.2L128 132.48 50.56 0H0z\"\n/\u003e\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdneustadt%2Fvue-rough","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdneustadt%2Fvue-rough","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdneustadt%2Fvue-rough/lists"}